一、 动画(animation)

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

动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果

1、 动画的基本使用

* 先定义动画
* 在调用定义好的动画

2、语法
@keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px } }
调用动画
div { /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续时间; }
二、动画序列

0% 是动画的开始,100 % 是动画的完成,这样的规则就是动画序列
在 @keyframs 中规定某项 CSS 样式,就由创建当前样式逐渐改为新样式的动画效果
动画是使元素从一个样式逐渐变化为另一个样式的效果,可以改变任意多的样式任意多的次数
用百分比来规定变化发生的时间,或用 from 和 to,等同于 0% 和 100%

应用:
@keyframes move { /* from{ transform: translate(0,0); } to { transform:
translate(1000px,0); } */ 0% { transform: translate(0,0); } 25% { transform:
translate(1000px,0); } 50% { transform: translate(1000px,500px); } 75% {
transform: translate(0,500px); } 100% { transform: translate(0,0); } }
三、动画常见属性 

代码应用
div { width: 100px; height: 100px; background-color: aquamarine; /* 动画名称 */
animation-name: move; /* 持续时间 */ animation-duration: 4s; /* 动画速度曲线 */
animation-timing-function: ease; /* 动画开始时间 */ animation-delay: 1s; /* 动画播放次数 */
/* animation-iteration-count: 2; */ /* 动画播放方向 */ /* animation-direction:
alternate; */ /* 动画结束后状态 */ animation-fill-mode: forwards; } div:hover {
animation-play-state: paused; }
 四、 动画简写方式

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
   animation: name duration timing-function delay iteration-count direction
fill-mode

注:

简写里面不包含 animation-paly-state
暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
要想动画走回来,而不是直接调回来:animation-direction: alternate
盒子动画结束后,停在结束位置:animation-fill-mode: forwards

技术
今日推荐
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信