zoukankan      html  css  js  c++  java
  • @keyframes、animation

    通过@keyframes规则,可以创建动画

    原理:将一套css样式逐渐变为另一套css样式

    用法:以百分比或“from”、“to”关键字来控制动画开始和结束。在动画过程中,可以多次改变这套css样式

    animation是一个简写的属性,主要用于设置6个动画属性:

    • animation-name:需要绑定到选择器上的keyframe的名字
    • animation-duration:完成动画所花费的时间(s、ms)
    • animation-timing-function:动画的速度曲线
    • animation-delay:动画开始之前的延迟,允许负值,-2s使动画马上开始,但是跳过2s进入动画
    • animation-interation-count:动画应该播放的次数,几次或无数次  (n、infinite)
    • animation-direction:是否轮流反向播放动画,正常播放、轮流反向播放(normal、alternate)
        .draw-move{
                animation: open 0.2s linear 0.5s infinite alternate;
                animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
                -webkit-animation: open 0.2s linear 0.5s infinite alternate;
                -webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
            }
            @keyframes open{
                0% {
                    transform: scale(1);
                }
                100% {
                    transform: scale(0.9);
                }
            }
            @-webkit-keyframes open{
                0% {
                    -webkit-transform: scale(1);
                }
                100% {
                    -webkit-transform: scale(0.9);
                }
            }

    animation-timing-function可能的值:

    linear 动画从头到尾的速度都是相同的(匀速)
    ease 默认。动画以低速开始,中间加快,在结束前又变慢
    ease-in 动画以低速开始
    ease-out 动画以低速结束
    ease-in-out 动画以速度开始以低速结束
    cubic-bezier(n,n,n,n) 自定义值,可能的值为0到1之间的数字
  • 相关阅读:
    #define IOFFSETOF(TYPE, MEMBER) ((size_t) &((TYPE *)0)->MEMBER)
    互联网地址处理例程
    Android系统工程模式启动过程详解
    知识填充
    git 本地回退
    理解JS中的Promise对象
    MySQL server version for the right syntax to use near 'identified
    尾递归要注意的点
    事件捕获和事件冒泡的理解
    v 2ra-y_build_a_sever_in_vltru
  • 原文地址:https://www.cnblogs.com/zsj-02-14/p/10178545.html
Copyright © 2011-2022 走看看