-
动画的基本使用
- 先定义动画
- 在调用定义好的动画
-
语法格式(定义动画)
@keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px } }
-
语法格式(使用动画)
div { /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续时间; }
-
动画序列
- 0% 是动画的开始,100 % 是动画的完成,这样的规则就是动画序列
- 在 @keyframs 中规定某项 CSS 样式,就由创建当前样式逐渐改为新样式的动画效果
- 动画是使元素从一个样式逐渐变化为另一个样式的效果,可以改变任意多的样式任意多的次数
- 用百分比来规定变化发生的时间,或用
from
和to
,等同于 0% 和 100%
-
代码演示
<style> div { width: 100px; height: 100px; background-color: aquamarine; animation-name: move; animation-duration: 0.5s; } @keyframes move{ 0% { transform: translate(0px) } 100% { transform: translate(500px, 0) } } </style>
-
/* 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
- 简写属性里面不包含
-
代码演示
animation: move 2s linear 1s infinite alternate forwards;
速度曲线细节
animation-timing-function
: 规定动画的速度曲线,默认是ease