CSS中的动画

1.transition

在CSS3中，可以通过transition为元素从一种样式变换为另外一种样式的过程添加效果。

transition为简写属性，用于在一个属性中设置四个过渡属性，分别是：

transition-property：应用过渡的CSS属性的名称，如width，background-color等；

transition-duration：过渡过程所花的时间，如不指定，默认为0；

transition-timing-function：过渡效果的时间曲线，即动画速度随时间的变化而变化，默认为ease（先慢再变快再以慢速结束）；

transition-delay：规定过渡效果延迟多少开始，默认为0；

eg：

<style>
div{
    width:50px;
    heigth:50px;
    background-color:yellow;
    transition:width 2s;
}
div:hover{
    width:100px;
}
</style>

<div></div>

上面的例子中，当鼠标移到该元素上面时，元素的宽度width会在2s内从50px增加为100px；

另外transition-property的值也可以设定为transform，这样一来就可以实现更多的动画效果

eg：

<style> 
div
{
width:100px;
height:100px;
background:yellow;
transition:transform 2s;
}

div:hover
{
transform:translate(30px,40px);
}
</style>


<div></div>

上面的例子中，当鼠标移到该元素上面时，元素两秒内向左向下移动30px、40px；

如果需要向多个样式添加过渡效果，应该使用逗号隔开

eg：

div{
    transition:width 2s,transform 3s,height 4s;
}

2.animation

animation 包含六个属性，分别是：

animation-name：规定@keyframes动画的名称；

animation-duration：规定完成一个动画周期所花的时间；

animation-timing-function：规定动画速度的变化曲线，默认为ease；

animation-delay：规定动画延迟开始的时间，默认为0；

animation-iteration-count：规定动画被播放的次数（周期），默认为1，infinite为无限次播放；

animation-direction：规定动画是否在下一周期逆序播放，默认为normal，动画正常播放，设置为alternate时，动画在1，3，5等奇数次时正常播放，在2，4，6等偶数次逆序播放；

除此6个属性外，还有两个不包含在animation简写属性内的。

animation-play-state：规定动画是运行还是暂停的，running表示运行中，paused表示暂停中，一般在JavaScript中使用，如此便可以在播放过程中暂停动画。

animation-fill-mode：规定动画在播放前或播放后，动画效果是否可见。属性值默认为none；设置为forwards时，当动画完成时，保持最后的效果（即保持在最后的关键帧中设置的效果），设置为backwards时，在animation-delay设置的那段时间内，在动画正式开始时，应用在最开始的关键帧中定义的效果

和animation密切相关的，还有上面提到的@keyframes，@keyframes用于创建动画，通过在@keyframes中定义CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

eg：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #test {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: myAnimation 3s;
        }
        @keyframes myAnimation {
            from {
                width: 100px;
            }
            to {
                width: 300px;
            }
        }
    </style>
</head>
<body>
    <div id="test"></div>
</body>
</html>

另外，animation不同于transition的地方在于，animation可以定义关键帧，可以使动画在多个状态间变换

eg：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #test {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: myAnimation 3s;
        }
        @keyframes myAnimation {
            0% {
                width: 100px;
            }
            30% {
                width: 200px;
            }
            60% {
                width: 250px;
            }
            100% {
                width: 300px;
            }
        }
    </style>
</head>
<body>
    <div id="test"></div>
</body>
</html>

猜你喜欢