CSS, HTML öğelerinin JavaScript veya Flash kullanmadan canlandırılmasına olanak tanır!
Bu bölümde aşağıdaki özellikler hakkında bilgi edineceksiniz:
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimationTablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Property | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
Animasyon, bir öğenin kademeli olarak bir stilden diğerine değişmesine olanak tanır.
İstediğiniz kadar CSS özelliğini istediğiniz kadar değiştirebilirsiniz.
CSS animasyonunu kullanmak için öncelikle bazı anahtar kareleri belirtmeniz gerekir. animasyon.
Anahtar kareler, öğenin belirli zamanlarda hangi stillere sahip olacağını tutar.
@keyframes içinde CSS stillerini belirttiğinizde kural, animasyonun mevcut stilden yeni stile kademeli olarak değişmesidir Belirli zamanlarda.
Bir animasyonun çalışması için animasyonu bir öğeye bağlamanız gerekir.
Aşağıdaki örnek, "örnek" animasyonu <div> öğesine bağlar. Animasyon 4 saniye sürecek ve kademeli olarak değişecektir. <div> öğesinin arka plan rengi "kırmızı"dan "sarı"ya:
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red; animation-name: example;
animation-duration: 4s;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
</body>
</html>
Not: animation-duration özelliği Bir animasyonun tamamlanmasının ne kadar süreceğini tanımlar. animation-duration özelliği belirtilmemişse, herhangi bir animasyon meydana gelmeyecek çünkü varsayılan değer 0s'dir (0 saniye).
Yukarıdaki örnekte stilin ne zaman değişeceğini kullanarak belirttik. "başlangıç" ve "bitiş" anahtar kelimeleri (bu %0 (başlangıç) ve %100'ü (tamamlandı) temsil eder).
Yüzde kullanmak da mümkündür. Yüzdeyi kullanarak istediğiniz kadar ekleyebilirsiniz stil istediğiniz gibi değişir.
Aşağıdaki örnek <div> öğesinin arka plan rengini değiştirecektir. animasyon %25 tamamlandığında, %50 tamamlandığında ve yine animasyon %100 tamamlandığında öğe:
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
</body>
</html>
Aşağıdaki örnek, <div> öğesinin hem arka plan rengini hem de konumunu değiştirecektir. animasyon %25 tamamlandığında, %50 tamamlandığında ve yine animasyon %100 tamamlandığında öğe:
/* The animation code */
@keyframes example
{
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
</body>
</html>
animation-delay özelliği, bir animasyonun başlatılması için bir gecikme belirtir.
Aşağıdaki örnekte, animasyonu başlatmadan önce 2 saniyelik bir gecikme vardır:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation:</p>
<div></div>
</body>
</html>
Negatif değerlere de izin verilir. Negatif değerler kullanılıyorsa animasyon zaten N saniyedir oynatılıyormuş gibi başlayacak.
Aşağıdaki örnekte animasyon sanki daha önce yapılmış gibi başlayacaktır. 2 saniye boyunca oynatılıyor:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>Using negative values in the animation-delay property: Here, the animation will start as if it had already been playing for 2 seconds:</p>
<div></div>
</body>
</html>
animation-iteration-count özelliği, bir animasyonun kaç kez çalıştırılması gerektiğini belirtir.
Aşağıdaki örnek, animasyonu durmadan önce 3 kez çalıştıracaktır:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation 3 times before it stops:</p>
<div></div>
</body>
</html>
Aşağıdaki örnek, animasyonu oluşturmak için "sonsuz" değerini kullanır sonsuza kadar devam et:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-iteration-count property can be set to infinite to let the animation run for ever:</p>
<div></div>
</body>
</html>
animation-direction özelliği şunu belirtir: Bir animasyonun ileri, geri veya dönüşümlü olarak oynatılması gerekip gerekmediği döngüler.
Animation-direction özelliği aşağıdaki değerlere sahip olabilir:
normal- Animasyon normal şekilde oynatılır (ileriye doğru). Bu varsayılandır
reverse- Animasyon ters yönde (geriye doğru) oynatılır
alternate- Animasyon önce ileriye, sonra geriye doğru oynatılır
alternate-reverse- Animasyon önce geriye, sonra ileriye doğru oynatılır
Aşağıdaki örnek, animasyonu ters yönde (geriye doğru) çalıştıracaktır:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction:
reverse;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example will run the animation in reverse direction (backwards):</p>
<div></div>
</body>
</html>
Aşağıdaki örnek, animasyonu yapmak için "alternatif" değerini kullanır önce ileri, sonra geriye doğru koşun:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate" to make the animation run forwards first, then backwards:</p>
<div></div>
</body>
</html>
Aşağıdaki örnek, animasyonu yapmak için "alternatif-geri" değerini kullanır önce geriye, sonra ileriye doğru koşun:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate-reverse;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards:</p>
<div></div>
</body>
</html>
animation-timing-function özelliği, hız eğrisini belirtir. animasyon.
Animation-timing-function özelliği aşağıdaki değerlere sahip olabilir:
ease- Yavaş başlayan, sonra hızlı, sonra yavaş yavaş biten bir animasyon belirtir (bu varsayılandır)
linear- Baştan sona aynı hızda bir animasyon belirtir
ease-in- Yavaş başlayan bir animasyonu belirtir
ease-out- Yavaş uçlu bir animasyonu belirtir
ease-in-out- Yavaş başlayan ve biten bir animasyonu belirtir
cubic-bezier(n,n,n,n)- Kübik bezier işlevinde kendi değerlerinizi tanımlamanıza olanak tanır
Aşağıdaki örnek kullanılabilecek farklı hız eğrilerinden bazılarını göstermektedir:
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
animation: mymove 5s;
animation-fill-mode: forwards;
}
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-timing-function property specifies the speed curve of the animation. The following example shows some of the different speed curves that can be used:</p>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>
CSS animasyonları, ilk animasyon karesi oynatılmadan önce bir öğeyi etkilemez veya son ana kare oynatıldıktan sonra. Animation-fill-mode özelliği şunları yapabilir: bu davranışı geçersiz kılın.
animation-fill-mode özelliği, bir Animasyon oynatılmadığında hedef öğenin stili (ondan önce) başlar, bittikten sonra veya her ikisi birden).
Animation-fill-mode özelliği aşağıdaki değerlere sahip olabilir:
none- Varsayılan değer. Animasyon, yürütülmeden önce veya yürütüldükten sonra öğeye herhangi bir stil uygulamayacaktır
forwards- Öğe, son ana kare tarafından belirlenen stil değerlerini koruyacaktır (animasyon yönüne ve animasyon yineleme sayısına bağlıdır)
backwards- Öğe, ilk anahtar kare tarafından belirlenen stil değerlerini alır (animasyon yönüne bağlıdır) ve bunu animasyon gecikme süresi boyunca korur
both- Animasyon, animasyon özelliklerini her iki yönde de genişleterek hem ileri hem de geri kurallara uyacaktır
Aşağıdaki örnek, <div> öğesinin stil değerlerini korumasını sağlar. animasyon bittiğinde son ana kare:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes example {
from {top: 0px;}
to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>Let the div element retain the style values set by the last keyframe when the animation ends:</p>
<div></div>
</body>
</html>
Aşağıdaki örnek, <div> öğesinin, tarafından ayarlanan stil değerlerini almasını sağlar. animasyon başlamadan önceki ilk ana kare (animasyon gecikme süresi sırasında):
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
@keyframes example {
from {top: 0px; background-color: yellow;}
to {top: 200px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>Let the div element get the style values set by the first keyframe before the animation starts (during the animation-delay period):</p>
<div></div>
</body>
</html>
Aşağıdaki örnek, <div> öğesinin ayarlanan stil değerlerini almasını sağlar animasyon başlamadan önceki ilk anahtar kareye kadar ve stil değerlerini koruyun animasyonun sona erdiği son ana kareden itibaren:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
@keyframes example {
from {top: 0px; background-color: yellow;}
to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>Let the div element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:</p>
<div></div>
</body>
</html>
Aşağıdaki örnekte animasyon özelliklerinden altı tanesi kullanılmaktadır:
div
{ animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
} Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>This example uses six of the animation properties:</p>
<div></div>
</body>
</html>
Yukarıdaki animasyon efektinin aynısı kısayol kullanılarak da elde edilebilir. animasyon özelliği:
div
{
animation: example 5s linear 2s infinite alternate;
}Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>This example uses the shorthand animation property:</p>
<div></div>
</body>
</html>
Aşağıdaki tabloda @keyframes kuralı ve tüm CSS animasyon özellikleri listelenmektedir:
Animasyon kodunu belirtir
Tüm animasyon özelliklerini ayarlamak için kullanılan kısa bir özellik
Bir animasyonun başlangıcı için bir gecikme belirtir
Bir animasyonun ileri, geri veya geriye doğru oynatılıp oynatılmayacağını belirtir. alternatif döngülerde
Bir animasyonun bir döngüyü tamamlamasının ne kadar zaman alması gerektiğini belirtir
Animasyon oynatılmadığında öğe için bir stil belirtir (Başlamadan önce, bittikten sonra veya her ikisi)
Bir animasyonun kaç kez oynatılması gerektiğini belirtir
@keyframes animasyonunun adını belirtir
Animasyonun çalışıp çalışmadığını veya duraklatıldığını belirtir
Animasyonun hız eğrisini belirtir