闲话少说 直接进入正题
基础知识巩固:
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后开始); 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>