©2020-2024 ioDraw All rights reserved,
Privacy Policy
一、 动画(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