CSS3 @keyframes动画规则说明

半兽人 发表于: 2019-03-26   最后更新时间: 2019-03-26  

W3CSchool标准CSS使用语法 *@keyframes 针对不同浏览器兼容:

screenshot

    @keyframes mymove
    {
    from {top:0px;}
    to {top:200px;}
    }

    @-moz-keyframes mymove /* Firefox */
    {
    from {top:0px;}
    to {top:200px;}
    }

    @-webkit-keyframes mymove /* Safari 和 Chrome */
    {
    from {top:0px;}
    to {top:200px;}
    }

    @-o-keyframes mymove /* Opera */
    {
    from {top:0px;}
    to {top:200px;}
    }

注:目前浏览器都不支持 @keyframes 规则;

  • Firefox 支持替代的 @-moz-keyframes规则;
  • Opera 支持替代的 @-o-keyframes 规则;
  • Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

@keyframes 语法

screenshot

html与css代码:div匀速向下运动

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>index</title>
        <meta name="description" content="">
        <meta name="author" content="boonya">

        <meta name="viewport" content="width=device-width; initial-scale=1.0">

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: #39B940;
                position:relative;
                -moz-animation:mymove 5s infinite;/*infinite无限循环*/
            }
            @-moz-keyframes mymove{
                from{top:0px;}
                to{top:300px;}
            }
        </style>
    </head>
    <body>
        <div> 
            <p>我是小妞妞。</p>
        </div>

    </body>
</html>

注:图片为静态,效果为动态,请参考https://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes

带有多个 CSS 样式的多个 keyframe 选择器,html与css代码

<style>
 div {
     width: 200px;
     height: 200px;
     background-color: #39B940;
     position:relative;
     -moz-animation:mymove 5s infinite;  
     border-radius:25px;
 }
 @-moz-keyframes mymove{
     0%   {top:0px; 
           left:0px; 
           background:#A217A2;}
     25%  {top:0px; 
           left:100px; 
           background:#0FC646;}
     50%  {top:100px; 
           left:100px; 
           background:#DEAF24;}
     75%  {top:100px; 
           left:0px; 
           background:#0FC646;}
     100% {top:0px; 
           left:0px; 
           background:#A217A2;}
 }
</style>

注:图片为静态,效果为动态,请参考 https://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes4



您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容





发表于: 5月前   最后更新时间: 5月前   游览量:308
上一条: css动画-圆形扩散(音效)
下一条: python解决图像中文乱码