动画
1、动画基础
1、动画是css中具有颠覆性的特征之一,可以通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的 动画效果。相比较过渡,动画可以实现更多变化、更多控制、连续自动播放等效果
2、动画的基本使用:
1 先定义动画
2 再调用动画
2、动画的基本使用
1、使用keyframes定义动画(类似定义类选择器)
/*使用 @keyframes来定义动画,后面跟着动画名称,然后设置0%是什么样子。100%什么样子*/
@keyframes trans {
0%{
transform: translateX(0px);
}
100%{
transform: translateX(500px) rotate(45deg);
}
}
2、使用动画:首先要调用这个动画,后面跟着动画的名称,然后设置动画的持续时间是多少
/* 调用动画 */
animation-name:trans;
/* 持续时间 */
animation-duration: 2s;
3、动画序列:0%是动画的开始,100%是动画的完成,这个规则就是动画序列
4、在@keyframs中规定某项css样式,就能创建由当前样式逐渐改为新样式的动画效果。
5、动画就是使元素从一种样式变为另一种样式的效果,可以改变任意多的样式任意多的次数
6、使用from和to等价于0和100%
7、可以做多个状态的变化,里面的百分比必须是整数。百分比就是总的时间的划分
3、动画常用属性
1.animation-name:指定要对当前元素生效的关键帧的名字
2.animation-duration:指定动画的执行时间
3.animation-timing-function:跟transition-timing-function用法一样
4. animation-iteration-count:指定动画执行的次数 animation-iteration-count:infinite;(无限执行)
5.animation-direction:指定动画运行的方向
normal 默认值 从from向to运行 每次都是这样
reverse 从 to 向 from 运行 每次都是这样
alternate 从 from 向 to 运行 重复执行动画时反向执行
alternate-reverse 从 to 向 from 运行 重复执行动画时反向执行
6. animation-play-state:设置动画的执行状态
可选值:
running 默认值 动画执行
paused 动画暂停
7.animation-fill-mode:指定动画的填充模式
可选值:
none 默认值 动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时,元素就会处于开始位置
both 结合了 forwards 和 backwards
8.animation-delay:设置动画的延时
9.transition:可以同时设置动画相关的所有属性,只有一个要求,如果要写延迟,则两个时间中第一个是持续时间,第二个是延迟。
/* 规定动画的速度曲线,默认是ease */
animation-timing-function: ease-out;
/* 设置何时开始 */
animation-delay: 2s;
/* 循环播放infinite:无限循环 */
animation-iteration-count:infinite ;
/* 是否反方向播放 alternate反方向:*/
animation-direction: alternate;
4、跳动的爱心代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置动画效果</title>
<style>
@keyframes trans{
0%{
transform: scale(0.5,0.5);
}
15%{
transform: scale(1,1);
}
30%{
transform: scale(0.5,0.5);
}
45%{
transform: scale(1,1);
}
60%{
transform: scale(0.5,0.5);
}
75%{
transform: scale(1,1);
}
90%{
transform: scale(0.5,0.5);
}
100%{
transform: scale(1,1);
}
}
div{
width: 400px;
height: 400px;
background: url(../img/爱心2.png);
background-position: center;
animation-name: trans;
animation-duration: 10s;
animation-iteration-count: infinite
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5、旋转方块代码(动画属性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画的常用属性</title>
<style>
@keyframes trans {
from {
transform: translate(0, 0) scale(1, 1) rotate(90deg);
}
to {
transform: translate(200px, 200px) scale(2, 2) rotate(180deg)
}
}
div {
width: 200px;
height: 200px;
background-color: red;
animation-name: trans;
animation-duration: 5s;
/* 规定动画的速度曲线,默认是ease */
animation-timing-function: ease-out;
/* 设置何时开始 */
animation-delay: 2s;
/* 循环播放infinite:无限循环 */
animation-iteration-count:infinite ;
/* 是否反方向播放 alternate反方向:*/
animation-direction: alternate;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6、走路的雪人
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
background-image: url(../img/精灵图.jpg);
height:180px;
width: 123px;
margin: 0 auto;
animation-name: run;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: steps(4);
}
@keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -487px 0;
}
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>