您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 @keyframes

2018-9-5 21:20| 作者: admin| 查看: 1630| 评论: 0|来自: 蚂蚁部落

CSS3中,主要有两种实现动画效果的属性:

(1).transition属性。

(2).animation属性。

transition翻译成汉语是"过渡"的意思,它能够设置元素指定属性从一个属性值过渡到另一个属性值。

由此在视觉上产生动画效果,看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#ant{
  width:100px;
  height:100px;
  background:blue;
  transition:width 4s;
}
#ant:hover{
  width:500px;
  height:100px;
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

上面代码中,当鼠标悬浮于div之上,div的宽度会以动画效果改变。

这时候可能会有朋友提出类似问题,既然transition属性可以实现动画效果,为什么还需要animation。

这是因为transition是一个不懂得浪漫的属性,动画效果比较单调直白,无法更加精细的控制中间过程,而animation利用@keyframes属性可以更加精准的控制中间过程,让动画过程更加丰富多样。

一.@keyframes属性:

keyframes是key与frame的合成词,是关键帧的意思。

由此可以猜想到,animation动画过程是以"关键帧"进行控制的。

语法结构:

[CSS] 纯文本查看 复制代码
@keyframes animationname {keyframes-selector {css-styles;}}

参数解析:

(1).animationname:用来规定animation动画的名称。

(2).keyframes-selector:用来对动画时长进行分段,有两种方式:         

         百分比方式,百分之百表示整个动画过程时长,那么百分之10%就是总时长的十分之一,以此类推。

         "from" 和 "to"方式,等价于 0% 和 100%

         特别说明:推荐使用百分比方式。

二.代码实例:

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

上面代码实现以动画效果设置div元素的left属性值。

代码分析如下:

(1).animation属性规定了动画的一些列特性,这里要特别注意的是动画名称"animaition-ant"。

(2).@keyframes属性规定了动画具体过程,它后面紧跟的就是animation属性规定的动画名称。

(3).采用from to方式规定动画过程,也就是在5秒时间将left属性值从0px设置为400px。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>蚂蚁部落</title>
<style>
div{ 
  width:100px; 
  height:100px; 
  background:red; 
  position:relative;
  animation:animaition-ant 4s infinite alternate;
}
@keyframes animaition-ant{ 
  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>

上一个代码对于@keyframes属性的演示过于简单,让人感觉和transition属性没有多大区别。

其实利用关键帧@keyframes属性可以实现对动画过程更为精细复杂的控制,上面的代码仅是一个演示。代码规定动画的总时长为4s,那么0%-25%这段时间就是1秒,在这一秒内实现了left从0到100px的过渡,背景颜色也由红色动画方式变为蓝色,其他过渡细节也是同样的道理,不再多介绍。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部