css3的animate动画属性小记
程序员文章站
2022-02-13 20:07:55
...
注：例子和截图均参考菜鸟教程，地址：http://www.runoob.com/cssref/css3-pr-animation.html
1.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
/*需做兼容处理*/
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite;
-moz-animation: mymove 5s infinite;
}
/*@keyframes定义动画名称*/
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
@-webkit-keyframes mymove{
from {
left: 0px;
}
to {
left: 200px;
}
}
@-moz-keyframes mymove{
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<p><strong>注意: </strong> Internet Explorer 9 及更早IE版本不支持 animation 属性。</p>
<div></div>
</body>
</html>2.语法（支持简写）
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
| 值 | 说明 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔。 |
| animation-iteration-count | 定义动画的播放次数。 |
| animation-direction | 指定是否应该轮流反向播放动画。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-play-state | 指定动画是否正在运行或已暂停。 |
| initial | 设置属性为其默认值。 阅读关于 initial的介绍。 |
| inherit | 从父元素继承属性。 阅读关于 initinherital的介绍。 |
3.说明：
（1）在某些时候希望，动画开始前，动画元素隐藏，在执行时才显示：（animation-fill-mode和opacity同时使用）
①html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 3s;
animation-iteration-count: 2;
/*重要设置为both*/
animation-fill-mode: both;
animation-delay: 3s;
-webkit-animation: mymove 3s;
-webkit-animation-iteration-count: 2;
/*重要设置为both*/
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 3s;
}
@keyframes mymove {
from {
top: 0px;
/*重要设opacity为0*/
opacity: 0;
}
to {
top: 200px;
/*重要设opacity为1*/
opacity: 100;
}
}
@-webkit-keyframes mymove
{
from {
top: 0px;
opacity: 0;
}
to {
top: 200px;
opacity: 100;
}
}
</style>
</head>
<body>
<p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p>
<div></div>
</body>
</html>②说明：
a.必须设置：animation-fill-mode: both;-webkit-animation-fill-mode: both;
b.同时设置：opacity初始为0，完成后为1
（2）animation-iteration-count：设置动画次数
①具体正整数或零，为次数；
②infinite为“动画应该播放无限次（永远）”
（3）animation-play-state：指定动画是否正在运行或已暂停
（在有些情况，例如音乐播放器右上角一直旋转的播放图标，播放时不停旋转，暂停时停止旋转，继续播放时继续旋转，就用到了）
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.box {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 10s;
/* Safari and Chrome */
-webkit-animation: mymove 10s;
}
/*暂停动画和继续运动*/
.paused{
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.btnks,.btnzt{
cursor: pointer;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 50px;
margin: 10px;
background-color: orange;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 500px;
}
}
/* Safari and Chrome */
@-webkit-keyframes mymove{
from {
left: 0px;
}
to {
left: 500px;
}
}
</style>
</head>
<body>
<p><strong>注意:</strong> animation-play-state属性不兼容 Internet Explorer 9以及更早版本的浏览器.</p>
<div class="box"></div>
<div class="btnzt">暂停</div>
<div class="btnks">开始</div>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//暂停
$(".btnzt").on("click",function(){
$(".box").addClass("paused");
});
//继续动画
$(".btnks").on("click",function(){
$(".box").removeClass("paused");
});
</script>
</body>
</html>（4）animation-timing-function：运动曲线
animation-timing-function使用的数学函数，称为三次贝塞尔曲线，速度曲线。使用此函数，您可以使用您自己的值，或使用预先定义的值之一：
| 值 | 描述 | 测试 |
|---|---|---|
| linear | 动画从头到尾的速度是相同的。 | 测试 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 | 测试 |
| ease-in | 动画以低速开始。 | 测试 |
| ease-out | 动画以低速结束。 | 测试 |
| ease-in-out | 动画以低速开始和结束。 | 测试 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
（5）animation动画当元素由隐藏变为显示时，会再次执行（这点很好，在做某些H5活动时，做成一个页面，点击返回按钮，让动画的容器由隐藏变为显示，动画就会再次执行，不用再次初始化js，很是方便）
下一篇： 帧