闲话我们就不说了,我们直接接入我们的主题:
基础知识巩固:
1. animation-name :xxx (我们的动画名称);
2. animation-duration : 2s (动画的持续时间为2s);
3. animation-timing-function : linear (动画运动的曲线);
匀速: linear
低速开始—>加速—>结束前减速 :ease (系统默认)
以低速开始 :ease-in
以低速结束 :ease-out
以低速开始和结束 : ease-in-out
4. animation-delay : 1s (动画等待1s后开始);
扫描二维码关注公众号,回复: 14813848 查看本文章5. animatiom-iteration-count : 1 (动画播放次数为1次);
无限次执行 : infinite
6. animation-direction : nomal (设置动画执行规则);
系统默认 : nomal
往返动画,执行完一次之后往回执行下一次 : alternate
反向执行 : reverse
7. animation-fill-mode : none (动画结束的最后一帧);
不做任何改变 : none
让元素结束状态保持动画最后一帧的样式 : forwards
让元素等待状态的时候显示动画第一帧的样式 : backwards
等待状态显示第一帧,结束状态保持最后一帧 : both
8. animation-fill-mode : none (设置动画是否暂停);
执行动画: running
暂停动画: paused
动画使用 简写 :
animation : 动画名称、时间、运动曲线、等待时长、播放次数、执行规则、动画帧、是否暂停。
使用案例 :
<!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>animation 方法介绍</title>
<style>
.box{
margin: 0 auto;
color: white;
text-align: center;
height: 50px;
line-height: 50px;
background-color: red;
cursor: pointer;
animation:mymove 5s linear forwards;
}
/* 动画关键帧 */
.box:hover {
/* 设置动画是否暂停*/
animation-play-state: paused;
}
@keyframes mymove{
from {width: 0px;}
to {width: 100%;}
};
/* @keyframes mymove{
0% {width: 0px;}
25% {width: 25%;}
50% {width: 50%;}
75% {width: 75%;}
100% {width: 100%;}
} */
</style>
</head>
<body>
<div class="box">测试效果,只做演示使用</div>
</body>
</html>
效果展示 :