什么是css动画?!
动画使元素逐渐从一种样式变为另一种样式。你可以随意更改任意数量的 CSS 属性,如需使用 CSS 动画，必须首先为动画指定一些关键帧,关键帧包含元素在特定时间所拥有的样式。
动画特点:
动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。
定义动画 (@keyframes):
方式一:
用 from to 来定义动画的开始状态和结束状态
@keyframes moveStyle {
from {
transform: translate(0,0);
}
to {
transform: translate(800px,0);
}
}
方式二:
用 0% 100% 来定义动画的开始和结束状态
@keyframes moveStyle {
0% {
transform: scale(1)
}
100% {
transform: scale(1.5)
}
}
2.调用动画(animation)
div {
width: 100px;
height: 100px;
background-color: skyblue;
/*用animation来给需要动画效果的目标调用*/
animation: example 4s infinite alternate ;
}
3.动画属性:
animation :动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态;
animation-name: 动画名称; /*命名规则推荐 动画名字参照css类选择器命名*/
animation-duration: 动画时长; /*单位: s 如:4s*/
animation-timing-function: 运动曲线。;
| 运动曲线 | 说明 |
|---|---|
| ease | 指定从慢速开始，然后加快，然后缓慢结束的动画（默认） |
| linear | 规定从开始到结束的速度相同的动画 |
| ease-in | 规定慢速开始的动画 |
| ease-out | 规定慢速结束的动画 |
| cubic-bezier(n,n,n,n) | 运行您在三次贝塞尔函数中定义自己的值 |
animation-delay:延迟时间; /*单位:s 如: 4s*/
animation-iteration-count: 重复次数; n(次数) infinite(无限循环)
animation-direction:动画方向;
- `normal` - 动画正常播放（向前）。默认值
- `reverse` - 动画以反方向播放（向后）
- `alternate` - 动画先向前播放，然后向后
- `alternate-reverse` - 动画先向后播放，然后向前
| 运动方向 | 说明 |
|---|---|
| normal | 动画正常播放（向前）(默认值) |
| reverse | 动画以反方向播放（向后） |
| alternate | 动画先向前播放，然后向后 |
| alternate-reverse | 动画先向后播放，然后向前 |
animation-fill-mode:执行完后的状态;
| 状态 | 说明 |
|---|---|
| none | 默认值。动画在执行之前或之后不会对元素应用任何样式。 |
| forwards | 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。 |
| backwards | 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。 |
| both | 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。 |
animation-play-state:规定动画运行还是暂停;/*一般配合hover属性一起使用*/
使用规则为:
/* 鼠标经过box， 则 ul 停止动画 */
.box:hover ul {
animation-play-state: paused;
}
/* 鼠标经过box， 则 ul 开始动画 */
.box:hover ul {
animation-play-state: running;
}
完结散花~
