zoukankan      html  css  js  c++  java
  • webkitanimation [CSS3]

    -webkit-animation: name, duration, timing-function, delay, iteration_count, direction

    ( 1 ) -webkit-animation-name    这个属性的使用必须结合@-webkit-keyframes一起使用

    eg:  @-webkit-keyframes fontchange{

    0%{font-size:10px;}

    30%{font-size:15px;}

    100%{font-siez:12px;}

    }

    百分比的意思就是duration的百分比,如果没有设置duration的话,则表示为无穷大。

    ( 2)-webkit-animation-duration   表示动画持续的时间

    ( 3 )-webkit-animation-timing-function  表示动画使用的时间曲线

    【语法】: -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out

    (4)-webkit-animation-delay    表示开始动画之前的延时

    【语法】 -webkit-animation-delay: delay_time;

    (5)-webkit-animation-iteration-count  表示动画要重复几次

    【语法】-webkit-animation-iteration-count: times_number;

    (6) -webkit-animation-direction   表示动画的方向

    【语法】-webkit-animation-direction: normal(默认)  | alternate

    normal  方向始终向前

    alternate 当重复次数为偶数时方向向前,奇数时方向相反

    【另外】跟animation有关的其他属性

    (1)-webkit-animation-fill-mode : none (默认)| backwards | forwards | both  设置动画开始之前和结束之后的行为(测试结

    果不是很清晰)

    (2)-webkit-animation-play-state: running(默认) | paused  设置动画的运行状态

    综合案例:

    @-webkit-keyframes fontbulger {

    0% {font-size: 10px;}

    30% {font-size: 15px;}

    100% {font-size: 12px;}

    }

    #box {

    -webkit-animation-name:  fontbulger;

    -webkit-animation-duration: 1s;

    -webkit-animation-iteration-count:3;

    -webkit-animation-direction: alternate;

    -webkit-animation-timing-function: ease-out;

    -webkit-animation-fill-mode: both;

    -webkit-animation-delay: 2s;

    }

    <div id="box">文字变化</div>

  • 相关阅读:
    经典基础算法之面试题(系列一)
    Shell脚本中的二维字符串列表
    网络字节流数据解析组件的设计与实现Circular Buffer(Ring Buffer)
    Django开发环境搭建(Windows+Python2.6)
    C++中堆(优先队列)的应用:make_heap, pop_heap, push_heap, sort_heap, priority_queue
    求逆序数的快速算法归并排序
    经典基础算法之BST详解(系列二)
    PHP数组去重
    微信小程序分享设置
    微信小程序判断开发环境
  • 原文地址:https://www.cnblogs.com/mahatmasmile/p/2867149.html
Copyright © 2011-2022 走看看