一、动画概念
动画是CSS3的一个重要用法,动画使元素逐渐从一种样式变为另一种样式。您可以随意更改任意数量的 CSS 属性。如需使用 CSS 动画,您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。
二、动画基本用法
1.动画模板
/* 动画代码,在style样式定义一个动画,名字为example */
<style>
@keyframes example {
/* "from" 和 "to"(代表 0%(开始)和 100%(完成)) */
from {background-color: red;}//开始颜色为红色
to {background-color: pink;}//完成时的颜色为粉色
}
/* 向此元素应用动画效果 */
div {
width: 100px;//盒子宽度
height: 100px;//盒子高度
background-color: red;//背景颜色
animation-name: example;//调用动画,exampl为定义的动画名字
animation-duration: 4s;//动画持续时间
}
</style>
2.动画的使用
1 animation-name
:调用已定义的动画名字
2animation-duration
:定义动画的持续时间,默认时间为0s
3animation-delay
:定义动画延迟时间
4 animation-direction
:定义动画的运动方向,指定是向前播放、向后播放还是交替播放动画,有以下四个参数:
normal
- 动画正常播放(向前)。默认值reverse
- 动画以反方向播放(向后)alternate
- 动画先向前播放,然后向后alternate-reverse
- 动画先向后播放,然后向前
5animation-timing-function
:定义动画的速度曲线
ease
- 指定从慢速开始,然后加快,然后缓慢结束的动画(默认)linear
- 规定从开始到结束的速度相同的动画ease-in
- 规定慢速开始的动画ease-out
- 规定慢速结束的动画ease-in-out
- 指定开始和结束较慢的动画cubic-bezier(n,n,n,n)
- 运行您在三次贝塞尔函数中定义自己的值
6 animation-iteration-count
:定义动画的播放次数,一共有两个参数
n
- n为任意正整数infinite
- 动画无限循环
7 animation-fill-mode
:规定目标元素的样式
none
- 默认值。动画在执行之前或之后不会对元素应用任何样式。forwards
- 元素将保留由最后一个关键帧设置的样式值(依赖 animation-direction 和 animation-iteration-count)。backwards
- 元素将获取由第一个关键帧设置的样式值(取决于 animation-direction),并在动画延迟期间保留该值。both
- 动画会同时遵循向前和向后的规则,从而在两个方向上扩展动画属性。
8 animation-duration
:定义动画的持续时间
3.小熊案例
素材:
- 首先先定义一个动画
1. 小熊动作的定义 bear:动画的名字 */
@keyframes bear{
0%{
background-position: 0 0;/* 定义初始化精灵图的位置 */
}
100%{
background-position: -1600px 0;/* 只移动x轴,y轴不进行移动 */
}
}
- 在body中新建一个div
2. 在body中新建一个div
<body>
<div></div>
</body>
- 设置style样式,调用动画
<style>
body{
background-color: pink;/* 设置body背景颜色 */
}
/* 设置div样式 */
div{
position: absolute;/* 设置定位为绝对定位 */
width: 200px;
height: 100px;
background: url(../../../images/image/bear.png) no-repeat;/* 导入小熊精灵图 */
/*调用动画方法 动画名字 时间 步长 无限循环动画*/
animation:bear 1.5s steps(8) infinite;
/* steps(8):设置8个步长,显得效果更佳、
infinite:无限循环
forwards:移动到指定位置后固定不动 */
}
</style>
效果图:
到这里,效果基本已经实现,但是小熊动画只能在原地动,不会像效果一样,会移动到屏幕的中心位置,那么这个时候需要重新给小熊定义一个移动的新动画。
- 重新新建一个动画
<style>
/* move移动到中央 */
@keyframes movebear{
0%{
left: 0px;/* 定义起始位置 */
}
100%{
margin: 100px auto;
left:50%;/* 定义移动后的位置 */
transform: translateX(-50%);
/* 向左走百分之50,等于自己宽度的一半,可以动态的根据width来调整 */
}
</style>
- 调用新建的动画,调用新的动画时用逗号分隔
<style>
/* 设置div样式 */
div{
position: absolute;/* 设置定位为绝对定位 */
width: 200px;
height: 100px;
background: url(../../../images/image/bear.png) no-repeat;/* 导入小熊精灵图 */
animation:bear 1.5s steps(8) infinite,movebear 3.2s forwards;
/* steps(8):设置8个步长,显得效果更佳、
infinite:无限循环
forwards:移动到指定位置后固定不动,保留最后一个元素定义的样式 */
/* 调用已定义的动画方法,调用两个动画需要用逗号分隔 */
}
</style>
- 效果展示
总结
动画还是挺好玩的,有兴趣的了解一下!