• 2016年11月10日--CSS动画


    jquery动画:http://www.w3school.com.cn/jquery/jquery_animate.asp
    CSS3动画教程1:http://www.w3school.com.cn/css3/css3_animation.asp
    CSS3动画教程2:http://www.runoob.com/css3/css3-animations.html

    .

    CSS3的动画属性

    下面的表格列出了 @keyframes 规则和所有动画属性:

    属性描述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

    运行下面的动画,其中设置了所有动画属性:

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width: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;
    }
    
    @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;}
    }
    
    @-moz-keyframes myfirst /* Firefox */
    {
    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;}
    }
    
    @-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;}
    }
    
    @-o-keyframes myfirst /* Opera */
    {
    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;}
    }
    </style>
    </head>
    <body>
    
    <p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
    
    <div></div>
    
    </body>
    </html>
    懒惰是发明之母!!!
    不要硬生生的把自己往故事里套,而是要学会体会故事,发现自己的影子。 http://www.cnblogs.com/hqxc/
  • 相关阅读:
    160720、SSM-Shiro使用详解
    Python学习(4)运算符
    Python学习(3)变量类型
    Python学习(2)基本语法
    Python学习(1)安装Python
    MonkeyRunner学习(3)脚本编辑
    MonkeyRunner学习(2)常用命令
    MonkeyRunner学习(1)测试连接
    Monkey学习(4)简单测试实例
    Monkey学习(3)如何在Android模拟器中安装apk
  • 原文地址:https://www.cnblogs.com/hqxc/p/6057594.html
Copyright © 2020-2023  润新知