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 动画应该轮流反向播放。 





    规定是否应该轮流反向播放动画。
  • 相关阅读:
    bash 常用操作
    阿里云专有网络与弹性公网IP
    Excel 中 Index 和 Match 方法的使用
    分割excel sheet
    vba 工作案例-sheet间拷贝内容
    趣味题:重男轻女的村庄
    vba 工作案例1
    wordpress 导航相关的函数
    怎么样打印加密PDF文件
    excel 2013 图表制作
  • 原文地址:https://www.cnblogs.com/qianyouluo/p/7147350.html
Copyright © 2011-2022 走看看