定番
新着
履歴

CSS3 アニメーションのサンプル

サンプル
コード

背景色を変える(再生ループ)

demo
サンプル
コード

画像を差し替える(時間差再生ループ)

サンプル
コード

形を変える(再生→逆再生)

←demo→
サンプル
コード

回転&移動(再生→逆再生)

demo
サンプル
コード

グラデーション&回転

demo
© 2024 kipure
Top


<h1>背景色を変える(再生ループ)</h1>

<style>
@keyframes ani1 {
  0% { background: #F00; }
  50% { background: #F0F; }
  100% { background: #00F; }
}
@-webkit-keyframes ani1 {
  0% { background: #F00; }
  50% { background: #F0F; }
  100% { background: #00F; }
}
#demo_box {
	animation:ani1 5s infinite;
	-webkit-animation: ani1 5s infinite;
	width:100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	color:#FFF;
}
</style>


<div id="demo_box">
demo
</div>


<h1>画像を差し替える(時間差再生ループ)</h1>

<style>
#demo_box2 {
	width:100px;
	height: 100px;
}
#demo_box2 img{
	position: absolute;
	height: 100px;
	opacity: 0;
}

#demo_box2 .image1{
	animation:ani2 5s infinite;
	-webkit-animation: ani2 5s infinite;
}
#demo_box2 .image2{
	animation:ani2 5s 2.5s infinite;
	-webkit-animation: ani2 5s 2.5s infinite;
}
}

@keyframes ani2 {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  40%  { opacity: 1; }
  60%  { opacity: 0; }
  80%  { opacity: 0; }
  100% { opacity: 0; }
}
@-webkit-keyframes ani2 {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  40%  { opacity: 1; }
  60%  { opacity: 0; }
  80%  { opacity: 0; }
  100% { opacity: 0; }
}

</style>


<div id="demo_box2">
<img class="image1" src="/image/sample/cat/001.jpg">
<img class="image2" src="/image/sample/cat/002.jpg">
</div>


<h1>形を変える(再生→逆再生)</h1>

<style>
@keyframes ani3 {
  0% { width:100px; }
  100% { width:200px; }
}
@-webkit-keyframes ani3 {
  0% { width:100px; }
  100% { width:200px; }
}
#demo_box3 {
	animation:ani3 3s infinite alternate;
	-webkit-animation: ani3 3s infinite alternate;
	width:100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	color:#FFF;
	background-color:#099;
}
</style>


<div id="demo_box3">
←demo→
</div>


<h1>回転&移動(再生→逆再生)</h1>

<style>
@keyframes ani4 {
  0%   { transform:rotate(0deg); left:0px;}
  100% { transform:rotate(360deg);left:50px; }
}
@-webkit-keyframes ani4 {
  0%   { transform:rotate(0deg); left:0px;}
  100% { transform:rotate(360deg);left:50px; }
}
#demo_box4 {
	animation:ani4 5s infinite alternate;
	-webkit-animation: ani4 5s infinite alternate;
	width:50px;
	height: 50px;
	position: relative;
	text-align: center;
	line-height: 50px;
	color:#FFF;
	background-color:#990;
}
</style>


<div id="demo_box4">
demo
</div>


<h1>グラデーション&回転</h1>
<style>
#demo_box5 {
  width:100px;
  height: 100px;
  color: #FFF;
  line-height: 100px;
  text-align: center;
}
@keyframes ani5_1 {
  0%   { transform:rotate(0deg); }
  10%  { transform:rotate(10deg);}
  20%  { transform:rotate(0deg); }
  30%  { transform:rotate(-10deg);}
  40%  { transform:rotate(0deg); }
  100% { transform:rotate(0deg);}
}
@-webkit-keyframes ani5_1 {
  0%   { transform:rotate(0deg); }
  10%  { transform:rotate(10deg);}
  20%  { transform:rotate(0deg); }
  30%  { transform:rotate(-10deg);}
  40%  { transform:rotate(0deg); }
  100% { transform:rotate(0deg);}
}

@keyframes ani5_2 {
  0%   { background:linear-gradient(to bottom, #6ab0cf, #6ab0cf, #6ab0cf)}
  10%  { background:linear-gradient(to bottom, #6ab0cf, #8ad0ef, #6ab0cf)}
  20%  { background:linear-gradient(to bottom, #6ab0cf, #6ab0cf, #6ab0cf)}
  30%  { background:linear-gradient(to bottom, #6ab0cf, #8ad0ef, #6ab0cf)}
  40%  { background:linear-gradient(to bottom, #6ab0cf, #6ab0cf, #6ab0cf)}
  100% { background:linear-gradient(to bottom, #6ab0cf, #6ab0cf, #6ab0cf)}
}
@-webkit-keyframes ani5_2 {
  0%   { background: -webkit-linear-gradient(top, #6ab0cf,  #6ab0cf, #6ab0cf)}
  10%  { background: -webkit-linear-gradient(top, #6ab0cf,  #8ad0ef, #6ab0cf)}
  20%  { background: -webkit-linear-gradient(top, #6ab0cf,  #6ab0cf, #6ab0cf)}
  30%  { background: -webkit-linear-gradient(top, #6ab0cf,  #8ad0ef, #6ab0cf)}
  40%  { background: -webkit-linear-gradient(top, #6ab0cf,  #6ab0cf, #6ab0cf)}
  100% { background: -webkit-linear-gradient(top, #6ab0cf,  #6ab0cf, #6ab0cf)}
}


#demo_box5 span{
	animation:ani5_1 2s infinite ;
	-webkit-animation: ani5_1 2s infinite ;
}
#demo_box5 {
	animation:ani5_2 2s infinite ;
	-webkit-animation: ani5_2 2s infinite ;
}




</style>


<div id="demo_box5"><span>demo</span></div>