zoukankan      html  css  js  c++  java
  • animation

    1.写法 - 默认值 - 单独写法 - 意义
    animation: name duration timing-function delay iteration-count direction;
    animation: none            0                   ease                       0                  1                         normal;
    animation: animation-name  animation-duration  animation-timing-function  animation-delay   animation-iteration-count  animation-direction;
    animation: keyframe 名称   动画所花费的时间 s/ms  动画的速度曲线               动画开始之前的延迟   动画应该播放的次数           是否应该轮流反向播放动画 ;
    2.细节写法(ie9+及其它浏览器兼容写法)
    兼容写法:标准 - Firefox - Safari 和 Chrome  - Opera
    @keyframes mymove
    {
    from {top:0px;}
    to {top:200px;}
    }
    @-moz-keyframes mymove    /    @-webkit-keyframes mymove    /    @-o-keyframes mymove
    3.animation-play-state: paused|running; 规定动画正在运行还是暂停。(默认值为running)
    4.animation-fill-mode : none | forwards | backwards | both;规定动画在播放之前或之后,其动画效果是否可见。默认值none(即不保持最后状态)
    forwards当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
    5.animation-timing-function:cubic-bezier(n,n,n,n);在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。扩展更丰富的动画
  • 相关阅读:
    HTML5 h1多层次样式问题
    spellcheck
    Favicon
    设计模式
    CSS 宽高的计算
    行高计算
    White-space 属性
    简约插件Plug-in for simple
    js类型及其判断
    前端路由
  • 原文地址:https://www.cnblogs.com/justSmile2/p/9544203.html
Copyright © 2011-2022 走看看