CSS Metin Animasyonu
Örnek1
<!doctype html>
<html>
<head>
<style>
.sinir {
margin: 50px auto;
width: 550px;
}
.box {
width: auto;
height: 100px;
background-color: #6a2e79;
margin: 0 auto;
float: left;
font-size: 100px;
padding: 20px;
color: #fff;
animation-iteration-count: infinite;
animation-name: aniload;
transition: width 2s, height 2s, transform 2s;
transform: rotate(0);
}
@keyframes aniload {
0% {
transform: translate(0px, 1000px)
}
50% {
transform: rotate(360deg) scale(2, 2);
}
100 {
transform: translate(0px, 0px);
}
}
#box1 {
animation-duration: 5s;
}
#box2 {
animation-duration: 1s;
}
#box3 {
animation-duration: 4s;
}
#box4 {
animation-duration: 3s;
}
#box5 {
animation-duration: 2s;
}
</style>
</head>
<body>
<div class="sinir">
<div class="box" id="box1">A</div>
<div class="box" id="box2">Y</div>
<div class="box" id="box3">K</div>
<div class="box" id="box4">U</div>
<div class="box" id="box5">T</div>
</div>
</body>
</html>
<html>
<head>
<style>
.sinir {
margin: 50px auto;
width: 550px;
}
.box {
width: auto;
height: 100px;
background-color: #6a2e79;
margin: 0 auto;
float: left;
font-size: 100px;
padding: 20px;
color: #fff;
animation-iteration-count: infinite;
animation-name: aniload;
transition: width 2s, height 2s, transform 2s;
transform: rotate(0);
}
@keyframes aniload {
0% {
transform: translate(0px, 1000px)
}
50% {
transform: rotate(360deg) scale(2, 2);
}
100 {
transform: translate(0px, 0px);
}
}
#box1 {
animation-duration: 5s;
}
#box2 {
animation-duration: 1s;
}
#box3 {
animation-duration: 4s;
}
#box4 {
animation-duration: 3s;
}
#box5 {
animation-duration: 2s;
}
</style>
</head>
<body>
<div class="sinir">
<div class="box" id="box1">A</div>
<div class="box" id="box2">Y</div>
<div class="box" id="box3">K</div>
<div class="box" id="box4">U</div>
<div class="box" id="box5">T</div>
</div>
</body>
</html>
Yorumunuzu Ekleyin