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>
  • 相关阅读:
    neo4j︱与python结合的py2neo使用教程
    Neo4j 简介 2019
    110.Java对象的序列化
    109.Java序列流
    108.Java装饰器设计模式
    107.Java中IO流_字符流的缓冲区
    106.Java中IO流_字符流的异常处理
    105.Java中IO流_字符流拷贝文件
    104.Java中IO流_字符流_Writer
    103.Java中IO流_字符流_Reader
  • 原文地址:https://www.cnblogs.com/tine/p/8522945.html
Copyright © 2011-2022 走看看