scale()とwidth, heightを使用した拡大縮小サンプル
* {
margin: 0;
padding: 0;
}
.foo,
.bar {
width: 50px;
height: 50px;
margin-bottom: 10px;
background: url(pumpkin.png) no-repeat right bottom;
}
.foo {
-webkit-animation: foo-ani 2s ease-out infinite alternate;
animation: foo-ani 2s ease-out infinite alternate;
margin-bottom: 10px;
border: 10px solid #C00;
}
@-webkit-keyframes foo-ani {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(2);
transform: scale(2);
}
}
@keyframes foo-ani {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(2);
transform: scale(2);
}
}
.bar {
-webkit-animation: bar-ani 2s ease-out infinite alternate;
animation: bar-ani 2s ease-out infinite alternate;
border: 10px solid #00C;
}
@-webkit-keyframes bar-ani {
0% {
width: 50px;
height: 50px;
}
100% {
width: 100px;
height: 100px;
}
}
@keyframes bar-ani {
0% {
width: 50px;
height: 50px;
}
100% {
width: 100px;
height: 100px;
}
}