css移行ノート

7963 ワード

3D     http://fangyexu.com/tool-CSS3Inspector.html
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style type="text/css">
        .box {
      
            width: 100px;
            height: 100px;
            background-color: #F00;
            /*transition-property: all;
            transition-duration: 4s;
            transition-timing-function: ease;
            transition-delay: 2s;*/
            transition:bacground 4s linear 2s,
                        width 2s ease-in 1s;

            color: #FFF;
        }
        .father:hover .box {
      
            margin-left: 500px;
        }
        .linear {
      
            transition-timing-function: linear;
        }
        .ease {
      
            transition-timing-function: ease;
        }
        .ease-in {
      
            transition-timing-function: ease-in;
        }
        .ease-out {
      
            transition-timing-function: ease-out;
        }
        .ease-in-out {
      
            transition-timing-function: ease-in-out;
        }
        .cubic-bezier {
      
            transition-timing-function: cubic-bezier(0.9, 1.26, 0.11, -0.9);
        }
    style>
head>
<body>
<div class="father">
    <div class="box linear">lineardiv>
    <div class="box ease">easediv>
    <div class="box ease-in">ease-indiv>
    <div class="box ease-out">ease-outdiv>
    <div class="box ease-in-out">ease-in-outdiv>
    <div class="box cubic-bezier">cubic-bezierdiv>
div>
body>
html>