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 的数值。扩展更丰富的动画
  • 相关阅读:
    //判断安卓 和ios
    不同屏幕适配
    在iOS设备下,h5的input框失焦后页面被顶起来一部分bug 用css解决办法
    div跟随手指滑动
    滑动事件
    手指长按事件
    es6数组属性
    loading加载百分比 以及根据加载进度移动元素
    刮刮乐
    h5上传图片并预览
  • 原文地址:https://www.cnblogs.com/justSmile2/p/9544203.html
Copyright © 2011-2022 走看看