Taken with instagram
-webkit-animation
-webkit-animation-name
-webkit-animation-duration
-webkit-animation-timing-function
-webkit-animation-iteration-count
-webkit-animation-direction
-webkit-animation-play-state
-webkit-animation-delay
-webkit-appearance
-webkit-backface-visibility
-webkit-background-size
-webkit-background-origin
-webkit-background-clip
-webkit-background-composite
-webkit-border-image
-webkit-border-radius
-webkit-border-bottom-left-radius
-webkit-box*
-webkit-box-align
-webkit-box-direction
-webkit-box-flex
-webkit-box-flex-group
-webkit-box-ordinal-group
-webkit-box-shadow
-webkit-box-sizing
-webkit-box-orient
-webkit-box-ordinal-group
-webkit-box-pack
-webkit-box-lines
-webkit-box-reflect
-webkit-columns
-webkit-column-width
-webkit-column-count
-webkit-column-gap
-webkit-column-rule
-webkit-column-rule-color
-webkit-column-rule-style
-webkit-column-rule-width
-webkit-transform
-webkit-transform-origin
-webkit-transform-style
-webkit-perspective
-webkit-perspective-origin
-webkit-text-stroke
-webkit-text-fill-color
-webkit-transition
-webkit-transition-property
-webkit-transition-duration
-webkit-transition-timing-function
-webkit-transition-delay
-webkit-transition-property
-webkit-transition-duration
-webkit-transition-timing-function
-webkit-gradient()*
-webkit-mask-box-image
-webkit-marquee
-webkit-marquee-style
-webkit-marquee-direction
-webkit-marquee-speed
-webkit-transform
-webkit-transform-style
-webkit-transform-origin
-webkit-backface-visibility
@font-face
と重要なのは
<style type=”text/css”>
div {
position:absolute;
height:350px;
left:50%;
margin-left:-350px;
margin-top:-350px;
position:absolute;
top:50%;
width:349px;
z-index:1;
-webkit-animation-name: burst_spin,fade,diagona_slide,rotate1,fade,move;
-webkit-animation-iteration-count: infinite;/* 数字にすると指定した回数だけ繰り返す */
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 8s;
background-color:#CCCC33;
}
@-webkit-keyframes burst_spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes diagona_slide{
0% {
left: 100px;
}
50% {
left: 550px;
}
100% {
left: 100px;
}
/* くるくる回転させるアニメーション */
@-webkit-keyframes rotate1 {
0% {-webkit-transform: rotate(0deg) rotateY(0) scale(1)}
70% {-webkit-transform: rotate(720deg) rotateY(0) scale(2.5)}
90% {-webkit-transform: rotate(720deg) rotateY(0) scale(2.5)}
100% {-webkit-transform: rotate(720deg) rotateY(360deg) scale(2.5)}
}
/* フェードインとフェードアウトするアニメーション */
@-webkit-keyframes fade {
0% {opacity: 0;}
50% {opacity: 0.3;}
70% {opacity: 0.9;}
90% {opacity: 0.9;}
100% {opacity: 0;}
}
/* 移動させるアニメーション */
@-webkit-keyframes move {
0% {left: 0; top: 0;}
50% {left: 200px; top: 200px;}
100% {left: 500px; top: 500px;}
}
}
</style>
