CSS3设置动画效果

CSS3设置动画效果

制作动画分为两步：

1. 先定义动画
   用keyframes定义动画

@keyframes 动画名称{
                0%{
                    width:100px;
                }
                100%{
                    width:200px;
                }
            }

0%是动画的开始，100%是动画的完成，当然也可以设置多个动画过程，比如20%，50%…
from和to等同于0%和100%

2. 再使用动画

div{
        animation-name:动画名称;
        animation-duration:持续时间;
}

动画属性：

属性	说明
animation-timing-function	规定动画的速度曲线，默认是’ease’
animation-delay	规定动画从何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，infinite是无限循环
animation-direction	规定动画的播放顺序，默认是normal，逆向播放是alternate
animation-fill-mode	规定动画结束后的状态，保持forwards，回到起始位置backwards
animation-play-state	paused暂停，running继续

@keyframes move {
            0% {
                transform: translateX(0px);
            }
            100% {
                transform: translateX(1200px);//从位置0px移动到1200px
            }
        }
 @keyframes Move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0);//先在X轴方向上移动1000px
            }
            50% {
                transform: translate(1000px, 500px);//再在Y轴方向上移动500px
            }
            75% {
                transform: translate(0, 500px);//再在X轴反方向上移动1000px
            }
            100% {
                transform: translate(0, 0);//回到起始位置
            }
        }
 .box1 {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            animation-name: move;
            animation-duration: 5s;
        }
 .box2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: Move;
            animation-duration: 10s;
        }
<div class="box1"></div>
<div class="box2"></div>