css学习之animation

最新推荐文章于 2022-07-27 21:56:30 发布

hjy170314

最新推荐文章于 2022-07-27 21:56:30 发布

阅读量314

点赞数

分类专栏：前端知识文章标签：前端样式

本文链接：https://blog.csdn.net/hjy170314/article/details/90295695

版权

前端知识专栏收录该内容

104 篇文章 2 订阅

订阅专栏

animation css动画效果

使用animation 需要使用@keyframes{}

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

必须设定动画时间，不然没有动画效果

@keyframes myfirst
{
   from {background: red;}
   to {background: yellow;}
}

@-moz-keyframes myfirst             /* Firefox */
{
  from {background: red;}
  to {background: yellow;}
}

@-webkit-keyframes myfirst          /* Safari 和 Chrome */
{
  from {background: red;}
  to {background: yellow;}
}

@-o-keyframes myfirst               /* Opera */
{
  from {background: red;}
  to {background: yellow;}
}

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

或用关键词 "from" 和 "to"，等同于 0% 和 100%。

@keyframes XXX{} 创建动画,XXX为动画的名称

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

@keyframes animationname {keyframes-selector {css-styles;}}

animationName ：必填动画的名称

keyframes-selector：必填项，是动画的时间长，可用百分比或者from ,to 来表示

css-styles：必填项，为动画产生的样式

<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 3s infinite;
-moz-animation:mymove 3s infinite; /* Firefox */
-webkit-animation:mymove 3s infinite; /* Safari and Chrome */
-o-animation:mymove 3s infinite; /* Opera */
}

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:00px}
100% {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:00px}
100% {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:00px}
100% {top:200px;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:00px}
100% {top:200px;}
}
</style>
</head>
<body>

<div></div>

</body>

<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
25% {top:200px; background:yellow; width:300px;}
50%{top:0px; background:red; width:100px;}
75%{top:200px; background:yellow; width:300px;}
100%{top:0px; background:red; width:100px;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px; background:red; width:100px;}
25% {top:200px; background:yellow; width:300px;}
50%{top:0px; background:red; width:100px;}
75%{top:200px; background:yellow; width:300px;}
100%{top:0px; background:red; width:100px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; background:red; width:100px;}
25% {top:200px; background:yellow; width:300px;}
50%{top:0px; background:red; width:100px;}
75%{top:200px; background:yellow; width:300px;}
100%{top:0px; background:red; width:100px;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:0px; background:red; width:100px;}
25% {top:200px; background:yellow; width:300px;}
50%{top:0px; background:red; width:100px;}
75%{top:200px; background:yellow; width:300px;}
100%{top:0px; background:red; width:100px;}
}
</style>
</head>
<body>

<div></div>

animation 动画，绑定在标签上

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

animation: name duration timing-function delay iteration-count direction;

name：执行动画的名称

duration：动画时间

timing-function：动画速度曲线

delay：是否延迟

iteration-count：动画执行多少次

direction：是否轮流反向播放

name为@keyframes后面的名称

animation-iteration-count: n|infinite;    播放次数

n：为播放n次

infinite：为无限循环

animation-direction 属性定义是否应该轮流反向播放动画。

animation-direction: normal|alternate;

normal：正常播放，默认值

alternate：反向无限播放

div
{
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */
}

animation-play-state 属性规定动画正在运行还是暂停。

animation-play-state: paused|running;

paused：动画暂停

running：动画正在播放

div
{
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
}

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

animation-fill-mode : none | forwards | backwards | both;

none：不改变默认行为

forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）

both：向前和向后填充模式都被应用。

hjy170314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习之animation

animation css动画效果使用animation 需要使用@keyframes{}Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe...
复制链接

扫一扫

专栏目录