css3动画

transform:translateY();  

transition 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img{transition:1s;}
        img:hover{transform: translateY(100px);}
    </style>
</head>
<body>
<img src="superman.jpg"/>
</body>
</html>

animation 全自动标准版

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        @keyframes img1 {
            0%{
                transform: translateY(100px);
                opacity: 0;
            }
            100% {
                transform: translateY(0px);
                opacity: 1;
            }
        }
        @-webkit-keyframes img1 {
            0%{
                transform: translateY(100px);
                opacity: 0;
            }
            100% {
                transform: translateY(0px);
                opacity: 1;
            }
        }
        img {
            animation: img1 2s ;                   /*最简参数，其他默认*/
            -webkit-animation: img1 2s ;
        }
    </style>
</head>
<body>
<img src="superman.jpg"/>
</body>
</html>

当多个元素共用一个动画时

animation 改进版

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        @keyframes img1 {
            100% {                                       /*直接 最终状态*/
                transform: translateY(0px);
                opacity: 1;
            }
        }
        @-webkit-keyframes img1 {
            100% {
                transform: translateY(0px);
                opacity: 1;
            }
        }
        img {
            transform: translateY(100px);              /*这里要写每个元素的初始状态*/
            -webkit-transform: translateY(100px);
            animation: img1 2s both;
            -webkit-animation: img1 2s both;          /*当元素初始状态 opacity:0 时，animation要加both,让动画执行完不消失*/
            opacity: 0;
        }
    </style>
</head>
<body>
<img src="superman.jpg"/>
</body>
</html>
animation: myfirst 5s linear 2s infinite alternate;    /*初始状态opacity为0时，需要加上both*/
            name  time 恒速  延时 播放无次数 反向播放  
animation: myfirst 1s linear 2s 1 normal both;     /*播放一次*/
posted @ 2016-05-05 10:14  gyz418  阅读(196)  评论(0)    收藏  举报