CSS3.0のAnimation - 動画効果(animation属性)

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> Animation </title>
   <style type="text/css">
    /* keyframe指定 */
    @-webkit-keyframes 'moving' {
        /* 開始 */
        0% {
            left: 100px;
        }
        /* 40%時のフレーム */
        40% {
            left: 150px;
        }
        /* 60%時のフレーム */
        60% {
            left: 75px;
        }
        /* 100%時のフレーム */
        100% {
            left: 100px;
        }
    }
    div{
        background-color: #ddd;
        border: 1px solid black;
        position: absolute;
        left: 100px;
        width: 60px;
        height: 60px;
    }
    /* mouseをのせる */
    div:hover {
        /* 開始動画指定 */
        -webkit-animation-name: 'moving';
        /* 実行時間 */
        -webkit-animation-duration: 5s;
        /* 繰り返し数 */
        -webkit-animation-iteration-count: 1;
    }
    </style>
</head>
<body>
<div>マウスを乗せると動画</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> Animation 複数属性 </title>
   <style type="text/css">
    /* キーフレーム */
    @-webkit-keyframes 'complex' {
        0% {
            -webkit-transform: rotate(0deg) scale(1);
            background-color: #f00;
        }
        40% {
            -webkit-transform:rotate(720deg) scale(0.1);
            background-color: #ff0;
        }
        80% {
            -webkit-transform:rotate(1080deg) scale(4);
            background-color: #f0f;
        }
        100% {
            -webkit-transform:rotate(0deg) scale(1);
            background-color: #00f;
        }
    }
    div{
        background-color: gray;
        border: 1px solid black;
        position: absolute;
        left: 160px;
        top: 120px;
        width: 100px;
        height: 100px;
    }
    div:hover {
        -webkit-animation-name: 'complex';
        -webkit-animation-duration: 8s;
        -webkit-animation-iteration-count: 1;
    }
    </style>
</head>
<body>
<div>マウスを乗せると動画開始</div>
</body>
</html>

f:id:liguofeng29:20160205220857g:plain

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
    <title> fisheye </title>
    <style type="text/css">
        a:link {
            text-decoration: none;
        }
        div>a{
            display: inline-block;
            text-align: center;
            width: 120px;
            padding: 8px;
            background-color: #eee;
            border: 2px solid black;
            border-radius : 20px;
        }
        /* フレーム */
        @-webkit-keyframes 'fisheye' {
            0% {
                -webkit-transform: scale(1);
                background-color: #eee;
                border-radius : 10px;
            }
            40% {
                -webkit-transform: scale(1.5);
                background-color: #bbb;
                border-radius : 10px;
            }
            100% {
                -webkit-transform: scale(1);
                background-color: #eee;
                border-radius : 10px;
            }
        }
        div>a:hover {
            -webkit-animation-name: 'fisheye';
            -webkit-animation-duration: 3s;
            /* 無限ループ */
            -webkit-animation-iteration-count: infinite;
        }
    </style>
</head>
<body>
<div>
    <a href="http://www.google.com" alt="google">google1</a>
    <a href="http://www.google.com" alt="google">google2</a>
    <a href="http://www.google.com" alt="google">google3</a>
    <a href="http://www.google.com" alt="google">google4</a>
</div>
</body>
</html>

f:id:liguofeng29:20160205220859g:plain

liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0のAnimation - 動画効果(animation属性)