• 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;}
    }
  • 相关阅读:
    [导入]开源一个的Asp.net公共上传文件程序
    [导入]安装Nginx,最近在研究这个,鄙视用F5的
    [导入]Movable Type 的 Feed Widget 很牛,真的很牛!
    [导入]如果得了ls综合症怎么办?
    [导入]鼓泡泡的电容!
    [导入]如果得了ls综合症怎么办?
    sql语法、函数等等大全
    学习ASP.NET MVC3(3) Razor视图引擎(上)
    学习ASP.NET MVC3(1) 概述
    依赖属性的好处
  • 原文地址:https://www.cnblogs.com/benpaodegegen/p/7278541.html
Copyright © 2020-2023  润新知