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>