• html5 动画运动 属性


    属性    描述    CSS
    @keyframes    规定动画。    3
    animation    所有动画属性的简写属性,除了 animation-play-state 属性。    3
    animation-name    规定 @keyframes 动画的名称。    3
    animation-duration    规定动画完成一个周期所花费的秒或毫秒。默认是 0。    3
    animation-timing-function    规定动画的速度曲线。默认是 "ease"。    3
    animation-delay    规定动画何时开始。默认是 0。    3
    animation-iteration-count    规定动画被播放的次数。默认是 1。    3
    animation-direction    规定动画是否在下一周期逆向地播放。默认是 "normal"。    3
    animation-play-state    规定动画是否正在运行或暂停。默认是 "running"。    3
    animation-fill-mode    规定对象动画时间之外的状态。    3
    下面的两个例子设置了所有动画属性:
    animation:myfirst 5s linear 2s infinite alternate;
    1.animation-name 动画的名称 、
    2.animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

    3.animation-timing-function 规定动画的速度曲线。默认是 "ease"。
    
    
    4.animation-delay    规定动画何时开始。默认是 0。

    5.animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。

    复杂的写法: div { 100px; height:100px; background:red; position:relative; animation-name:myfirst; animation-duration:5s; animation-timing-function:linear; animation-delay:2s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; /* Firefox: */ -moz-animation-name:myfirst; -moz-animation-duration:5s; -moz-animation-timing-function:linear; -moz-animation-delay:2s; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; -moz-animation-play-state:running; /* Safari and Chrome: */ -webkit-animation-name:myfirst; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running; /* Opera: */ -o-animation-name:myfirst; -o-animation-duration:5s; -o-animation-timing-function:linear; -o-animation-delay:2s; -o-animation-iteration-count:infinite; -o-animation-direction:alternate; -o-animation-play-state:running; } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } 简写: div { 100px; height:100px; background:red; position:relative; animation:myfirst 5s linear 2s infinite alternate;
    1.animation-name   动画的名称 、
    2.animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

    3.animation-timing-function 规定动画的速度曲线。默认是 "ease"。
    4.animation-delay    规定动画何时开始。默认是 0。
    5.animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
    /* Firefox: */ -moz-animation:myfirst 5s linear 2s infinite alternate;
    /* Safari and Chrome: */ -webkit-animation:myfirst 5s linear 2s infinite alternate;
    /* Opera: */ -o-animation:myfirst 5s linear 2s infinite alternate; }


    @keyframes myfirst {
    0% {background:red; left:0px; top:0px;}
    25% {background:yellow; left:200px; top:0px;}
    50% {background:blue; left:200px; top:200px;}
    75% {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
    }
  • 相关阅读:
    Linux常见问题解决
    (转)CoreDNS:Kubernetes内部域名解析原理、弊端及优化方式
    (转)Go sync.WaitGroup的用法
    (转)5个维度对 Kubernetes 集群优化及压测方案
    使用 Alpine 作为基础镜像时可能会遇到的常见问题的解决方法
    提前预防K8s集群资源不足的处理方式配置
    docker runc升级
    Nginx常见问题解决
    DNS泛域名解析应用(nip.io)
    使用Velero备份Kubernetes集群
  • 原文地址:https://www.cnblogs.com/benpaodegegen/p/7278541.html
Copyright © 2020-2023  润新知