zoukankan      html  css  js  c++  java
  • transition与animation

    transition

    transition 属性是一个简写属性,用于设置四个过渡属性
    transition-property, 设置过渡效果过属性名
    transition-duration, 规定完成过度的时间
    transition-timing-function,规定过渡效果的速度曲线
    transition-delay 定义过渡效果过什么时候开始

    transition 的初始值为:

    transition-delay: 0s;
    transition-duration: 0s;
    transition-property: all;
    transition-timing-function: ease;

    animation定义和用法

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

    • animation-name,规定需要绑定到选择器的 keyframe 名称。。
    • animation-duration,规定完成动画所花费的时间,以秒或毫秒计。
    • animation-timing-function,规定动画的速度曲线。
    • animation-delay,规定在动画开始之前的延迟。
    • animation-iteration-count,规定动画应该播放的次数。
    • animation-direction,规定是否轮流反向播放、
    • 默认值:none 0 ease 0 1 normal,
    • 在javascript中的用法object.style.animation="mymove 5s infinite"

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

     

    语法

    animation: name duration timing-function delay iteration-count direction;
    规定是否应该轮流反向播放动画。


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

    描述 
    linear 动画从头到尾的速度是相同的。 
    ease 默认。动画以低速开始,然后加快,在结束前变慢。 
    ease-in 动画以低速开始。 
    ease-out 动画以低速结束。 
    ease-in-out 动画以低速开始和结束。 
    cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。


    animation-iteration-count 属性定义动画的播放次数。

    描述 
    n 定义动画播放次数的数值。 
    infinite 规定动画应该无限次播放。 


    animation-direction 属性定义是否应该轮流反向播放动画。

    如果 animation-direction 值是 "alternate",则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。

    注释:如果把动画设置为只播放一次,则该属性没有效果。

    描述 
    normal 默认值。动画应该正常播放。 
    alternate 动画应该轮流反向播放。 





    规定是否应该轮流反向播放动画。
  • 相关阅读:
    poj 2528 Mayor's posters (线段树+离散化)
    poj 1201 Intervals (差分约束)
    hdu 4109 Instrction Arrangement (差分约束)
    poj 1195 Mobile phones (二维 树状数组)
    poj 2983 Is the Information Reliable? (差分约束)
    树状数组 讲解
    poj 2828 Buy Tickets (线段树)
    hdu 1166 敌兵布阵 (树状数组)
    Ubuntu网络配置
    Button控制窗体变量(开关控制灯的状态)
  • 原文地址:https://www.cnblogs.com/qianyouluo/p/7147350.html
Copyright © 2011-2022 走看看