动画的基本使用

一、制作动画分为两步:

1.先定义动画

2.再使用(调用)动画i 1.用keyframes定义动画(类似定义类选择器) @keyframes动画名称{ 0%{ width: 100px; 100%{ width: 200px; }

动画的基本使用

二、动画序列

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

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

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

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

三、动画简写属性 animation :

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

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

●暂停动画 : animation-play-state: puased; 经常和鼠标经过等其他配合使用 想要动画走回来,而不是直接跳回来: animation-direction : alternate

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