传智博客
快捷导航
蚂蚁部落
蚂蚁部落 网站首页 前端教程 CSS3教程 查看内容

栏目导航

≡文本≡

≡颜色≡

≡渐变≡

≡边框≡

≡背景≡

≡transform变换≡

≡transition过渡≡

≡animation动画≡

≡column多列布局≡

≡flex弹性布局≡

≡其他≡

CSS3 animation

2017-10-30 01:51| 发布者: admin| 查看: 901| 评论: 0|来自: 蚂蚁部落

传智播客

animation翻译成中文是“动画”的意思。

CSS3 animation属性就是用来定义元素的动画效果,复合属性。

使用transition可以实现动画过渡效果,但是此属性有个很大缺点,从初始值到终止值的过渡过程可控性很差,不能够细致的控制动画效果,而animation属性则可以结合@keyframes定义的动画名称,更为精细的控制动画效果。

更多关于transition内容可以参阅CSS3 transition一章节。

语法结构:

[CSS] 纯文本查看 复制代码
animation:[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ] || [animation-play-state] || [animation-fill-mode]]*

参数解析:

(1).animation-name:规定元素所应用的动画名称,由@keyframes定义。

(2).animation-duration:规定动画的持续时间。

(3).animation-timing-function:规定动画的过渡类型。

(4).animation-delay:规定动画的开始执行的延迟时间。

(5).animation-iteration-count:规定动画的重复次数。

(6).animation-direction:规定动画循环中是否会反向运动。

(7).animation-play-state:规定动画是否正在运行或暂停。

(8).animation-fill-mode:规定对象动画时间之外的状态。

特别说明:如果提供多属性值,以逗号进行分隔。 

关于@keyframes可以参阅CSS3 @keyframes一章节。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{
  width:100px;
  height:100px;
  background:red;
  position:relative;
   
  animation:theanimation 5s infinite alternate;
  -webkit-animation:theanimation 5s infinite alternate ;
  -moz-animation:theanimation 5s infinite alternate ;
  -o-animation:theanimation 5s infinite alternate ;
}
@keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@-webkit-keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@-moz-keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@-o-keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
@-ms-keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

设置div的left属性值从0px到200px进行动画过渡,能够无限次的重复循环,且进行反向运动。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{
  width:100px;
  height:100px;
  background:red;
  position:relative;
   
  animation:theanimation 4s infinite alternate;
  -webkit-animation:theanimation 4s infinite alternate ;
  -moz-animation:theanimation 4s infinite alternate ;
  -o-animation:theanimation 4s infinite alternate ;
}
@keyframes theanimation{
  0%{top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
@-moz-keyframes theanimation{
  0% {top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
@-webkit-keyframes theanimation{
  0%{top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
@-o-keyframes theanimation{
  0%{top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的代码就比第一个要复杂一些了,下面介绍一下它的运行过程:

(1).整个动画的总时间设置为4秒。

(2).@keyframes定义了动画的四个阶段,0%-25%时间段将left属性值从0设置为100px,背景色从red转换为blue,25%-50%、50%-75%和75%-100%也是同样的道理。

(3).并且实现无限循环和反向运动效果。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>蚂蚁部落</title>  
<style type="text/css">  
div{ 
  width:100px; 
  height:100px; 
  background:red; 
  position:relative; 
     
  animation:ant-1 5s infinite alternate,ant-2 2s infinite alternate; 
  -webkit-animation:ant-1 5s infinite alternate,ant-2 2s infinite alternate; 
  -moz-animation:ant-1 5s infinite alternate,ant-2 2s infinite alternate; 
  -o-animation:ant-1 5s infinite alternate,ant-2 2s infinite alternate; 
}
@keyframes ant-1{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-webkit-keyframes ant-1{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-moz-keyframes ant-1{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-o-keyframes ant-1{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-ms-keyframes ant-1{ 
  0% {left:0px;} 
  100% {left:200px;} 
}
@keyframes ant-2{ 
  0% {top:0px;} 
  100% {top:200px;} 
} 
@-webkit-keyframes ant-2{ 
  0% {top:0px;} 
  100% {top:200px;} 
} 
@-moz-keyframes ant-2{ 
  0% {top:0px;} 
  100% {top:200px;} 
} 
@-o-keyframes ant-2{ 
  0% {top:0px;} 
  100% {top:200px;} 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

以上代码一次性为div设置了多组动画属性,中间用逗号分隔。

animation是复合属性,自然可以将属性分别设置,具体可以参阅下面的章节:

(1).animation-name参阅CSS3 animation-name一章节。

(2).animation-duration参阅CSS3 animation-duration一章节。

(3).animation-timing-function参阅CSS3 animation-timing-function一章节。

(4).animation-delay参阅CSS3 animation-delay一章节。

(5).animation-iteration-count参阅CSS3 animation-iteration-count一章节。

(6).animation-direction参阅CSS3 animation-direction一章节。。

(7).animation-play-state参阅CSS3 animation-play-state一章节。

(8).animation-fill-mode参阅CSS3 animation-fill-mode一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-11-19 20:13 , Processed in 0.086907 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部