css-过度动画

css的帧动画，说白了就是和flash动画差不多，比如一个正方形过度成为一个圆形，并且是逐渐形成。
keyframes：关键帧。
animation：所有动画属性的简写属性，除了 animation-play-state 属性。

在box到达50%和100%位置时改变颜色
注：如果时长没有规定，不会有过渡效果，因为默认值是 0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帧动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            margin: 50px auto 0;
            animation: moving 1s ease;
            text-align: center;
            color: gold;

        }
        div{
            font-weight: bold;
            
        }
        @keyframes moving{
            0%{
                transform: translateY(0px);
                background-color: yellow;
            }
            50%{
                transform: translateY(400px);
                background-color: red;
            }
            100%{
                transform: translateY(0px);
                background-color: yellow;
            }
        }
    </style>
</head>
<body>
    <div class="box">哈哈哈</div>
</body>
</html>

css-过度动画

推荐阅读更多精彩内容