CSS3 set animation effect

CSS3 set animation effect

There are two steps to making an animation:

1. First define the animation, define the animation
   with keyframes

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

0% is the beginning of the animation, 100% is the completion of the animation, of course, you can also set multiple animation processes, such as 20%, 50%...
from and to are equivalent to 0% and 100%

2. Reuse animation

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

Animation properties:

Attributes	Description
animation-timing-function	Specifies the speed curve of the animation, the default is'ease'
animation-delay	Specifies when the animation starts, the default is 0
animation-iteration-count	Specifies the number of times the animation is played, the default is 1, infinite is an infinite loop
animation-direction	Specifies the playback sequence of the animation, the default is normal, reverse playback is alternate
animation-fill-mode	Specify the state after the animation ends, keep forwards, and return to the starting position backwards
animation-play-state	paused, running continues

@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>