构成一个动画的最基本属性需要 一个@keyframes
和 duration
。
@keyframes (go) {
form{
transform:translateX(0px) translateY(0);
to{
transtion
transform:translateX(200px) translateY(0);
}}
animation: go 2s ease-in 3s 2 forwards;
2s内执行完,规定动画的速度曲线,延迟3s,循环播放2次,停留在终点。
animation
属性是一个简写属性,它是下面属性的缩写:
animation-name 定义@keyframes时的名称
animation-duration 动画持续时间
animation-timing-function改变动画运动的速度曲线
animation-delay 延迟多少时间
animation-iteration-count 播放动画的次数
animation-direction 设置infinite无限循环或n代表几次
animation-fill-mode 动画结束后forwards停在终点