zoukankan      html  css  js  c++  java
  • CSS3 2D转换 动画

    transform:translate(x,y);

    过度  鼠标悬浮 在2s内完成所有变化

    div
    {
        width:100px;
        height:100px;
        background:red;
        transition: 2s;   
        -webkit-transition: 2s; /* Safari */
    }
    
    div:hover
    {
        width:300px;
        height:200px;
    }

    CSS3 动画

    当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。

    指定至少这两个CSS3的动画属性绑定向一个选择器:

    • 规定动画的名称
    • 规定动画的时长
    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;}
    }
  • 相关阅读:
    Activity的生命周期和启动模式
    网络基础1
    Jersey用户指南学习笔记1
    IntelliJ IDEA + Maven + Jetty + Jersey搭建RESTful服务
    Java并发编程实战笔记—— 并发编程4
    Java并发编程实战笔记—— 并发编程3
    Java并发编程实战笔记—— 并发编程2
    7.2.4
    7.2.4
    7.2.3
  • 原文地址:https://www.cnblogs.com/RonnieQin/p/9377149.html
Copyright © 2011-2022 走看看