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

CSS3 animation 动画

2019-2-4 16:11| 作者: admin| 查看: 1064| 评论: 0|来自: 蚂蚁部落

CSS3之前,制作动画效果没有太好的捷径,基本要借助JavaScript。

不但代码量较大,性能也不够优良,CSS3的出现使得制作动画效果更为简单且性能更好。

当前,animation与transition属性可以实现动画效果,更为准确的说,transition属性实现的是"过渡"。

两个属性的命名与其功能可以说恰如其分,关于两者的区别可以参阅animation与transition 区别一章节。

下面将通过代码实例详细介绍一下animation属性的用法,本文包含如下几方面内容:

(1).animation基础语法。

(2).CSS动画的实质。

(3).animation与@keyframes动画演示分析。

(4).animation动画的注意点。

一.animation基础语法:

语法结构:

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

参数解析:

(1).animation-name:规定动画的名称,利用它可以与@keyframes关联起来。

(2).animation-duration:规定动画的时长,时间是秒,比如5s。

(3).animation-timing-function:规定动画的过渡类型,可以使用内置固定的关键字,也可以自定义数据。

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

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

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

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

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

有很多属性值从字面上不容易理解,不用担心,后面会有代码演示和对应属性的相关文章。

如果animation提供了多组属性值,那么组与组之间使用逗号分隔。

animation与border等属性一样,都是复合属性,可以使用复合写法,也可以将属性单独列出。

二.CSS动画的实质:

不要将动画效果想象的太神奇,之所以能够在视觉上呈现视觉效果,无非是元素属性值的持续变化。

比如元素的width属性,在10秒内,由10px持续变化到100px。

三.动画演示:

[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;
}
@keyframes theanimation{
  0% {left:0px;}
  100% {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

代码分析如下:

(1).theanimation是动画名称。

(2).5s是完成一次动画持续的时间。

(3).infinite规定动画可以无限次重复。

(4).alternate规定动画:正常方向与反方向交替运动。

(5).@keyframes这是一个非常重要的属性,它后面跟随者与之关联的动画名称,它可以对整个动画过程的细节进行控制,比如一个时间段内设置背景颜色,另一个时间段设置元素尺寸等。

(6).上述代码将元素的left属性值在5秒内从0设置为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;
}
@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>

上面的代码稍微复杂一些,使用@keyframes属性对动画过程进行了更为精细的控制。

关于@keyframes属性的更多内容参阅CSS3 @keyframes一章节。

前文已经提到,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一章节。

四.animation动画的注意点:

[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: 200px;
  height: 100px;
  background-color: blue;
  animation: theanimation 5s;
}
@keyframes theanimation{
  from {background-color: green;}
  to {background-color: blue;}
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

可以看到animation属性设置后,不需要其他触发条件,会自动生效。

有朋友可能会有这样的疑问,div:hover {animation: theanimation 5s;}不就是设置触发条件吗,看起来好像是,但只是当鼠标悬浮div的时候为div添加动animation动画,这一点与transition动画不同,两者区别这里不做介绍,可以参阅文章开头推荐的文章。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS3 vw下一篇:CSS overflow-wrap

最新评论

返回顶部