CSS学习笔记——动画

动画的基本使用

制作动画分为两步:

1.先定义动画

2.再使用(调用)动画

用keyframes定义动画(类似定义类选择器)

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

动画序列

0% 是动画的开始，100%是动画的完成。这样的规则就是动画序列。

在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。

动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间 ,或用关键词"from"和"to" ,等同于0%和100%。

元素使用动画

div {
    /*调用动画★/
    animation-name:动画名称;
    /*持续时间*/
    animation-duration:持续时间;
}

动画简写属性

animation :动画名称 持续时间 运动曲线  何时开始  播放次数  是否反方向 动画起始或者结束的状态;

简写属性里面不包含animation-play- state

暂停动画: animation-play-state: puased; 经常和鼠标经过等其他配合使用

想要动画走回来,而不是直接跳回来: animation-direction : alternate

盒子动画结束后,停在结束位置: animationfill-mode : forwards

速度曲线细节

animation-timing-function :规定动画的速度曲线,默认是"ease'