zoukankan      html  css  js  c++  java
  • CSS样式动画

    浏览器支持

    Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

    Safari 和 Chrome 支持替代的 -webkit-animation 属性。

    注释:Internet Explorer 9 以及更早的版本不支持 animation 属性。

     

    animation 属性是一个简写属性,用于设置六个动画属性:

    • animation-name
    • animation-duration
    • animation-timing-function
    • animation-delay
    • animation-iteration-count
    • animation-direction

    注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

     

    animation: name duration timing-function delay iteration-count direction;

    animation-name 规定需要绑定到选择器的 keyframe 名称。。
    animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
    animation-timing-function 规定动画的速度曲线。
    animation-delay 规定在动画开始之前的延迟。
    animation-iteration-count 规定动画应该播放的次数。
    animation-direction 规定是否应该轮流反向播放动画。

     

     

     

    CSS3 @keyframes 规则

    Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

    Chrome 和 Safari 需要前缀 -webkit-。

    注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。

     

    什么是 CSS3 中的动画?

    动画是使元素从一种样式逐渐变化为另一种样式的效果。

    您可以改变任意多的样式任意多的次数。

    请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

    0% 是动画的开始,100% 是动画的完成。

    为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

    @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 和 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;}
    }

     

  • 相关阅读:
    算法----(1)冒泡排序
    淘宝爬虫
    爬虫_豆瓣电影top250 (正则表达式)
    爬虫_猫眼电影top100(正则表达式)
    Android 简单调用摄像头
    Android 简单天气预报
    思维模型
    This view is not constrained, it only has designtime positions, so it will jump to (0,0) unless you
    Android studio preview界面无法预览,报错render problem
    Android studio 3.1.2报错,no target device found
  • 原文地址:https://www.cnblogs.com/liuguiqian/p/11095579.html
Copyright © 2011-2022 走看看