CSS3 animation（动画）属性详解

最新推荐文章于 2024-05-15 10:37:51 发布

啊啊啊～～

最新推荐文章于 2024-05-15 10:37:51 发布

阅读量1.2k

点赞数

分类专栏： css3 文章标签： css3 animation

本文链接：https://blog.csdn.net/qq_40891322/article/details/109806188

版权

css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS3 animation（动画）属性详解

1.语法

简写为：animation: name duration timing-function delay iteration-count direction fill-mode;

@keyframes 规定 @keyframes 动画的名称。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
animation-fill-mode 规定对象动画时间之外的状态。

2.animation-iteration-count

语法animation-iteration-count: n|infinite;
n 定义动画播放次数的数值。
infinite 规定动画应该无限次播放。

3.animation-play-state

语法animation-play-state: paused|running;
paused 规定动画已暂停。
running 规定动画正在播放。

4.animation-fill-mode

语法animation-fill-mode : none | forwards | backwards | both;
none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。
这个属性的意思就是元素都有自己本身的样式，如果你设置了forwards，就代表动画结束之后，元素会直接保留最后一帧的样式，而不会返回到元素本来的样式。如果设置了backwards，就代表点开页面就直接是动画里面第一帧的样式，然后等待动画延迟时间过了就开始执行动画，both就是上面两者都运用，好处就是你只用看关键帧里面定义的样式，而不用管元素本来的样式。

5.示例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:rebeccapurple;
position:relative;
/* 规定 @keyframes 动画的名称。 */
animation-name:myfirst;
/* 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 */
animation-duration: 4s;
/* 规定动画的速度曲线。默认是 "ease"。 */
animation-timing-function: linear;
/* 规定动画的延迟时间。默认是 0。 */
animation-delay: 3s;
/* 规定动画被播放的次数。默认是 1。 */
animation-iteration-count:infinite;
/* 规定动画是否在下一周期逆向地播放。默认是 "normal"。 */
animation-direction:alternate;
/* 规定动画是否正在运行或暂停。默认是 "running"。属性值有两个，为paused和running */
animation-play-state:running;
 /* 当动画完成后，保持最后一个属性值 */
 animation-fill-mode:both;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
/* 以上可以简写为一个animation */
/* animation:myfirst 4s linear 3s 3 alternate; */
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst 
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>

</body>
</html>

6.补充

不同浏览器需要添加不同的前缀

 	animation:myfirst 5s;
   -moz-animation:myfirst 5s; /* Firefox */
   -webkit-animation:myfirst 5s; /* Safari and Chrome */
   -o-animation:myfirst 5s; /* Opera */

啊啊啊～～

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3 animation（动画）属性详解

CSS3 animation（动画）属性详解1.语法简写为：animation: name duration timing-function delay iteration-count direction fill-mode;@keyframes 规定 @keyframes 动画的名称。animation 所有动画属性的简写属性，除了 animation-play-state 属性。 animation-name 规定 @keyframes 动画的名称。 animation-duration 规
复制链接

扫一扫