zoukankan      html  css  js  c++  java
  • css3动画----animation

    在 前端页面中经常要加一些动效,css3的动画对一些小动效来说特别的方便。

    1.对于只有开始和结束的动画

    div
    {
    100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
    -o-animation:myfirst 5s; /* Opera */
    }
    
    @keyframes myfirst
    {
    from {background:red;}
    to {background:yellow;}
    }
    
    @-moz-keyframes myfirst /* Firefox */
    {
    from {background:red;}
    to {background:yellow;}
    }
    
    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
    from {background:red;}
    to {background:yellow;}
    }
    
    @-o-keyframes myfirst /* Opera */
    {
    from {background:red;}
    to {background:yellow;}
    }
    </style>
    </head>
    <body>
    
    <div></div>

    2.阶段性动画

    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
    -o-animation:myfirst 5s; /* Opera */
    }
    
    @keyframes myfirst
    {
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
    }
    
    @-moz-keyframes myfirst /* Firefox */
    {
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
    }
    
    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
    }
    
    @-o-keyframes myfirst /* Opera */
    {
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
    }
    </style>
    </head>
    <body>
    
    <div></div>
  • 相关阅读:
    bind智能DNS + bindUI管理系统(mysql + bind dlz)
    什么情况下,英文单词中的k发音变g,t发音变d,p发音变b
    rsyn同步软链接保持不变
    yaml,json,ini这三种格式用来做配置文件优缺点
    自动挡车档位介绍
    "挡位"还是"档位",究竟谁错了
    Gitlab备份与恢复、迁移与升级
    树的名称大全
    手动档正确换档手势
    gitlab HA集群
  • 原文地址:https://www.cnblogs.com/tine/p/8522945.html
Copyright © 2011-2022 走看看