zoukankan      html  css  js  c++  java
  • CSS3 animation 属性

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

    animation-name       规定需要绑定到选择器的 keyframe 名称。。
    animation-duration       规定完成动画所花费的时间,以秒或毫秒计。
    animation-timing-function     规定动画的速度曲线。
    animation-delay       规定在动画开始之前的延迟。
    animation-iteration-count     规定动画应该播放的次数。
    animation-direction      规定是否应该轮流反向播放动画。

    用法:animation:  name   duration   timing-function   delay   iteration-count   direction;

    默认值:      none     0       ease         0       1       normal

    注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。


    继承性: no
    版本: CSS3

    简写:animation :  mymove   5s   infinite;
    JavaScript 语法: object.style.animation="mymove 5s infinite"

    实例:将动画arrowing绑定div,然后使用css3  @keyframes 规则,在 @keyframes 中规定某项 CSS 样式,创建由当前样式逐渐改为新样式的动画效果。

    div
    {
    animation :     arrowing   5s    infinite;
    -webkit-animation : arrowing  5s    infinite;         /* Safari 和 Chrome */
    } 

    @keyframes arrowing {
    0% {transform: translateY(-5px);opacity: 0.8;}
    50% {transform: translateY(10px);opacity: 1;}
    100% {transform: translateY(-5px);opacity: 0.8;}
    }
    @-webkit-keyframes arrowing {          /* Safari and Chrome */
    0% {-webkit-transform: translateY(-5px);opacity: 0.8;}
    50% {-webkit-transform: translateY(10px);opacity: 1;}
    100% {-webkit-transform: translateY(-5px);opacity: 0.8;}
    }

    浏览器支持:

    Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
    Safari 和 Chrome 支持替代的 -webkit-animation 属性。
    注释:Internet Explorer 9 以及更早的版本不支持 animation 属性。

  • 相关阅读:
    【AHOI2009】 维护序列
    Codeforces Hello 2019 F. Alex and a TV Show[bitset+莫比乌斯反演]
    Codeforces Hello 2019 D. Makoto and a Blackboard[DP+数论+概率期望]
    Codeforces Hello 2019 ABCDF题解
    [BZOJ1042][HAOI2008]硬币购物[容斥原理+背包]
    Codeforces Round #529 (Div. 3)题解
    [BZOJ4311]向量[线段树分治+计算几何+二分/三分]
    [BZOJ1076][SCOI2008]奖励关[状压DP+概率期望]
    [POJ3368][UVA11235] Frequent values[ST表]
    [USACO5.5]矩形周长Picture[扫描线+线段树]
  • 原文地址:https://www.cnblogs.com/wangrong/p/6349108.html
Copyright © 2011-2022 走看看