zoukankan      html  css  js  c++  java

  • css 动画 transform transition animation

    1.transform 

    transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术

    -webkit-transform : translate(3em,0);想右移动3em，向下移动0em

    -webkit-transform : rotate(30deg);顺时针旋转30度

    -webkit-transform : translate(-3em,1em);向左移动3em，向下移动1em

    -webkit-transform : scale(2);尺寸放大两倍

    2.transition

    tansition 使可以让页面动起来

     -webkit-transition: all 2s ease-in-out;
     -moz-transition: all 2s ease-in-out;
 -o-transition: all 2s ease-in-out;
 transition: all 2s ease-in-out;


    3.animation
        -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;


    转自:http://kayosite.com/css3-animation.html

    CSS3 自定义动画（animation）

    时间：2013年1月9日 分类： 标签：‚ ‚  评论：12

    除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外，CSS3 还有一种自由度更大的自定义动画，开发者甚至可以使用变形（transformation）和转换（transition）制作自定义动画，利用纯 CSS 制作出像 Flash 一样的效果。在实际使用中不难发现，变形和转换更适合做元素的交互，而自定义动画除了做交互外还能使到网页具有活力，有了自定义动画，利用 CSS 代替 Flash 才会更加现实。

    首先看看 animation 的效果 —— Demo 。

    一. animation 基础

    animation 的参数与 transition 比较相似，如果之前了解过 transition 的童鞋应该会对 animation 的参数感觉很熟悉。具体的参数如下：

    animation-name

    动画名称，默认为 none

    animation-duration

    动画的持续时间，默认为 0

    animation-timing-function

    动画的过渡类型，参数可选值类似于 transition-timing-function ，默认为 ease ，具体如下：

    • linear：线性过渡。相当于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
    • ease：平滑过渡。相当于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
    • ease-in：由慢到快。相当于贝塞尔曲线(0.42, 0, 1.0, 1.0)
    • ease-out：由快到慢。相当于贝塞尔曲线(0, 0, 0.58, 1.0)
    • ease-in-out：由慢到快再到慢。相当于贝塞尔曲线(0.42, 0, 0.58, 1.0)
    • cubic-bezier(number, number, number, number)：特定的贝塞尔曲线类型，number 在 [0, 1] 区间内取值

    animation-delay

    动画延迟的时间

    animation-iteration-count

    动画的循环次数，其值可以是一个正整数，表示循环次数，也可以设置为 infinite ，即无限循环，默认为 1

    animation-direction

    动画在循环中是否反向运动，normal 为正向方向，alternate 为向常与反向交替运动，具体为第偶数次正向运动，第奇数次向反方向运动，默认为 normal

    animation-play-state

    表示动画的状态，默认值为 running ，表示正在运动，paused 为暂停。但 w3c 正在考虑是否将该属性移除，并通过重设样式或其他方式表示动画的状态，因此不建议使用该属性。

    以上这些参数都可以同时赋予多个值，只要注意各参数顺序对应即可，例如要为 #demo 指定两个动画，可以这样编写（大多数浏览器仍需通过私有属性才能支持 animation ，为了方便阅读，这里省略浏览器私有属性，按 W3C 标准写法编写。）

    1
    2
    3
    4
    5
    6
    #demo {
        /* 指定动画名称 */
        animation-name: animation1, animation2;
        /* 指定动画时长 */
        animation-duration: 2s 1s;
    }

    这样 #demo 就会同时获得两个动画，但是，动画的具体过程还没有指定，实际上动画的具体内容并不在 animation 内指定，而是利用另一个属性 @keyframes 指定，@keyframes 指定了一个动画的名称和实际内容，而 animation 则负责为元素指定引用的动画，并对动画的时间、过渡类型等作出设置。这样把动画的引用和动画的实际内容分开设置，可以提高动画的独立性和利用率。

    @keyframes 支持两种设置方式，分别用于简单动画和复杂的动画

    例如，为 #demo 设置一个简单的线性动画，使到其 opacity 值由 0 线性过渡到 1，可以直接使用 from 和 to 指定初始和结束状态，

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #demo {
        animation-name: animation1;
        animation-duration: 2s;
        animation-timing-function: linear;
    }
     
    @keyframes animation1{
        from{opacity: 0; }
        to{opacity: 1; }
    }

    若对于复杂的动画，则需要使用 percentage ，percentage 即百分比，animation 支持使用“%”指定到某一个百分比时动画所执行到的效果，例如指定元素向右平移再向下平移，可以这样编写：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    #demo {
        animation-name: animation1;
        animation-duration: 2s;
        animation-timing-function: linear;
    }
     
    @keyframes animation1{
        0% {transform: translate(0); }
        20% {transform: translate(120px); }
        40% {transform: translate(240px); }
        60% {transform: translate(240px, 40px); }
        80% {transform: translate(240px, 80px); }
        100% {transform: translate(240px, 120px); }
    }

    也可以配合 from 和 to 使用：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    #demo {
        animation-name: animation1;
        animation-duration: 2s;
        animation-timing-function: linear;
    }
     
    @keyframes animation1{
        from {transform: translate(0); }
        20% {transform: translate(120px); }
        40% {transform: translate(240px); }
        60% {transform: translate(240px, 40px); }
        80% {transform: translate(240px, 80px); }
        to {transform: translate(240px, 120px); }
    }

    当然，开发者也可以合并 animation 的各个单独属性，直接用 animation 简写：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #demo {
        animation: animation1 2s linear;
    }
     
    @keyframes animation1{
        0% {transform: translate(0); }
        20% {transform: translate(120px); }
        40% {transform: translate(240px); }
        60% {transform: translate(240px, 40px); }
        80% {transform: translate(240px, 80px); }
        100% {transform: translate(240px, 120px); }
    }

    效果请浏览 Demo（请使用 Chrome、Firefox、Safari 或 Opera 浏览，下同）。

    二. 动画的内容

    animation 配合 transform 无疑能做出一些不错的动画，但 animation 的能力不仅限于此，W3C 提供给 animation 可用于做动画过程的 CSS 属性有很多种，包括了元素的宽度（width）、高度（height）、边距（margin）、背景（background）等重要属性，具体请浏览 W3C 官方说明。熟悉 jQuery 的童鞋会发现，animation 与 jQuery 的 animate() 方法很相似，但 animate() 只支持数值类型动画，而不支持如颜色值等字符串值，在这点上 animation 更有优势，并且是纯 CSS 实现，无须包含一个 jQuery 库。当然，与 jQuery 已经做好完善的浏览器兼容相比，CSS3 的 animation 则显得有点逊色，因此暂时还是建议把 animation 渐进增强地用在网页效果与交互加强中，关于这一点文章末尾会再作论述。

    另外，transition 中的过渡属性可选值（transition-property）也是使用上面的值。

    三. animation 与 transform 和 transition 的区别

    很多的资料会把 transform 和 transition 同时直接归类为动画，的确，从很多实际使用的例子中看，transform 和 transition 都表现出动画的特征，但实际上，它们仍有很大的区别：

    transform 和 transition 需要经过用户触发才会表现出动态的效果，这些触发条件可以是:link、:visited、:hover、:active 和 :focus 五个 CSS 伪类，也可以是 click、focus 等 JavaScirpt 事件，如果没有设置触发条件而直接给元素设置 transform 或 transition ，用户只能看到元素的终态而没有动画过程。animation 则无须触发条件，开发者只需为元素绑定动画即可。

    另外，在旧版本的 animation 中，animation 、transform 以及 transition 都有一个重要的性质——过程执行完毕后会回撤，例如以 :hover 触发 transform ，在鼠标离开元素后动画自动反向播放，使到元素回到 transform 之前的状态，animation 也会在动画结束后回滚，但不会反向播放动画，而是直接跳到动画播放之前的动态。

    但是，经过修订，animation 增加了一个很重要的属性 animation-fill-mode ，这个属性控制设置动画之外的状态，即元素在动画开始前后的状态是否根据动画设置中“0%”、“100%”的状态设置，animation-fill-mode 的值可以为 none、forwards、backwards 或 both ，默认为 none ，即动画过程中“0%”、“100%”的状态不会设置为元素开始和结束的状态，backwards 和 forwards 则分别设置开始和结束的状态，both 则同时设置两个的状态，例如上面平移元素的例子，若加入 forwards 属性，则在动画结束后元素会保留在 100% 时动画设置的位置而不回撤。读者可以根据下面的 Demo 对比两者的不同之处。

    设置了 forwards 的 Demo 。

    有了这个属性，animation 动画也就更加完整了，虽然没有了这个属性，开发者仍可以设置出自己需要的效果，但是 animation 是需要配合其他 CSS 属性设置才会有最终的效果，若没有了这个属性设置动画将会复杂很多。

    四. 浏览器兼容

    animation 的兼容性如下：

    Chrome 13+、Firefox 5+、Safari 5.1+、Opera 12+、IE10+

    其中最新版的 Chrome、Safari、Opera 以及 IE（Chrome 22.0.1229.94 , Firefox 17.0.1 , Safari 5.1.7 , Opera 12.12 , IE10）需要通过私有属性才能支持 animation ，Firefox 则支持 W3C 的标准写法。

    虽然 animation 的浏览器支持情况仍稍有欠缺，但 animation 的效果真的十分出色，开发者不妨利用渐进增强的设计理念，把 animation 用在增强页面元素的效果或交互上，这样对于使用现代浏览器的用户来说无疑会提升他们的用户体验。

    当然，如果 animation 中还使用了 transform 或 transition ，那么兼容性则需要考虑到 transform 或 transition 的浏览器兼容性。考虑到综合的情况，Kayo 建议使用如下的方式调用 animation （以简单动画为例子）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    #demo {
        -webkit-animation: animation1 2s linear;
        -moz-animation: animation1 2s linear;
        -o-animation: animation1 2s linear;
        animation: animation1 2s linear;
    }
     
    @-webkit-keyframes animation1{
        from{opacity: 0; }
        to{opacity: 1; }
    }
     
    @-moz-keyframes animation1{
        from{opacity: 0; }
        to{opacity: 1; }
    }
     
    @-o-keyframes animation1{
        from{opacity: 0; }
        to{opacity: 1; }
    }
     
    @keyframes animation1{
        from{opacity: 0; }
        to{opacity: 1; }
    }

     

    		 
     
  • 相关阅读:
    spring整合websocket通信
    Log4j学习
    Elasticsearch学习之ES节点类型以及各种节点的分工
    Elasticsearch 学习之提升性能小贴士
    Python奇技淫巧
    汉语拼音转换工具（Python 版）
    根据数据库的表结构的类型返回其对应的简写类型
    python的动态加载机制？？
    计算二进制中的字符串的长度
    一个erlang游戏服务端
  • 原文地址：https://www.cnblogs.com/zerohu/p/5575214.html
Copyright © 2011-2022 走看看