CSS动画属性笔录

青春..荒唐

浏览: 972533 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS

【简介】

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

一般使用百分比来规定变化发生的时间，或用关键词 "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 表示设置为结束或者开始时候的状态。一般都是回到默认状态

分享到：

CSS背景属性笔录 | canvas丝带背景效果

2018-02-07 18:22
浏览 670
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论