CSS动画属性笔录

2018-02-08 10:20:18来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

【简介】

   动画是使元素从一种样式逐渐变化为另一种样式的效果,并且可以改变任意多的样式任意多的次数

   一般使用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

   0% 是动画的开始,100% 是动画的完成。为了得到最佳的浏览器支持,应该始终定义 0% 和 100% 选择器

【兼容】

   IE10、Firefox 以及 Opera 均支持动画属性,而Chrome 和 Safari 需要前缀 -webkit-

  优点:关于动画是CSS3引入的,可以在许多网页中取代动画图片、Flash 动画以及 JavaScript

【主要内容】

   1. CSS3的@keyframes 规则;

   2. animation 属性及它所配置的6个动画属性

      ①animation-name动画名;②animation-duration动画持续时间;③animation-timing-function定时功能;

      ④animation-delay动画延迟;⑤animation-iteration-count动画迭代计数;⑥animation-direction动画方向

【详解】

 一 . CSS3的@keyframes 规则

如需在 CSS3 中创建动画,需用到@keyframes 规则。@keyframes 规则用于创建动画,在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果

兼容:

  目前浏览器都不支持 @keyframes 规则

  Firefox 支持替代的 @-moz-keyframes 规则;Opera 支持替代的 @-o-keyframes 规则;Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则

动画绑定选择器:

  当在 @keyframes 中创建动画时,需要把它捆绑到某个选择器,否则不会产生动画效果

  通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

  ①规定动画的名称;②规定动画的时长

  注意:必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0

语法:

@keyframes animationname动画名称 {keyframes-selector时长 {css-styles;样式}}

 二 . animation 属性

 它所有动画属性的简写属性,除了 animation-play-state 属性

 作用:将动画与文档元素(div等dom)绑定

 animation 属性是一个简写属性,用于设置六个动画属性:

 ①animation-name动画名;②animation-duration动画持续时间;③animation-timing-function定时功能;

 ④animation-delay动画延迟;⑤animation-iteration-count动画迭代计数;⑥animation-direction动画方向

【兼容】IE10、Firefox 以及 Opera 支持6个动画属性,Safari 和 Chrome 支持替代的 -webkit+...属性

下面依次介绍6个动画属性:
 ①animation-name动画名-----规定需要绑定到选择器的 keyframe 名称;

 ②animation-duration动画持续时间------规定完成动画所花费的时间,以秒或毫秒计(默认值是 0,意味着没有动画效果);

 ③animation-timing-function动画定时功能------规定动画的速度曲线,速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

   animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。能够在该函数中使用自己的值,也可以预定义的值:

值描述测试
linear动画从头到尾的速度是相同的。测试
ease默认。动画以低速开始,然后加快,在结束前变慢。测试
ease-in动画以低速开始。测试
ease-out动画以低速结束。测试
ease-in-out动画以低速开始和结束。测试

 ④animation-delay动画延迟------ 定义动画何时开始,属性值以秒或毫秒计

   提示:允许负值,例-2s 使动画马上开始,但会从开始跳过 2 秒直接进入动画周期。默认值是 0

 ⑤animation-iteration-count动画迭代计数------规定动画应该播放的次数

 属性值:n------定义动画播放次数的数值;infinite------规定动画应该无限次播放

 ⑥animation-direction动画方向------规定是否应该轮流反向播放动画

 属性值:normal------默认值,动画正常播放;alternate------动画轮流反向播放(在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放),例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>画布</title>    <style type="text/css">        div{            width:100px;            height:100px;            background:red;            position:relative;            animation:myfirst 5s infinite;            animation-direction:alternate;            /* Safari and Chrome */            -webkit-animation:myfirst 5s infinite;            -webkit-animation-direction: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 /* Safari and Chrome */        {            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><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持                              animation-direction 属性。</p><div></div></body></html>

 三 . 其他动画属性

 ①animation-play-state动画播放状态------规定动画是否正在运行或暂停,默认是 "running"

 属性值:paused------规定动画已暂停;running------规定动画正在播放

 ②animation-fill-mode动画填充模式------规定对象动画时间之外的状态,指的是动画在播放之前或之后,其动画效果是否可见

通俗的讲就是动画结束之后保持什么状态

(1)none 表示不设置结束之后的状态,默认情况下回到跟初始状态一样;

(2)forwards 表示将动画元素设置为整个动画结束时的状态。;

(3)backwards 明确设置动画结束之后回到初始状态;

(4)both 表示设置为结束或者开始时候的状态。一般都是回到默认状态

 

 

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台