CSS | Animasyon İle Nesneyi Hareket Ettirme

Merhaba arkadaşlar aşağıdaki kodlamış olduğum tabelayı rüzgar sallıyormuş gibi hareket ettirmek istiyorum öne ve arkaya. Css animasyon ile hareket ettirebilir miyiz? Nasıl?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="UTF-8">
    <title>Tabela</title>
</head>
<body>
    <div class="genel">
        <div class="tutucu"></div>
        <div class="zincirler">
            <div class="zincir1"></div>
            <div class="zincir2"></div> 
            <div class="temizle"></div> 
        </div>
        <div class="tabele"></div>
    </div>
</body>
</html>

style.css

* { padding: 0;  margin: 0; }

body { background-color: #f1f1f1; }

.temizle { clear: both; }

.genel { width: 800px; margin: 20px auto; }

.tutucu { width: 600px; height: 20px; margin: 0 auto; border-radius: 50px; background-image: url(resim.png); }

.zincirler { width: 600px; margin: 0 auto; }

.zincir1 { float: left; width: 22px; height: 70px; background-image: url(zincir1.png); border-radius: 50px; margin-top: -3px; margin-left: 90px; }

.zincir2 { float: right; width: 22px; height: 70px; background-image: url(zincir1.png); border-radius: 50px; margin-top: -3px; margin-right: 90px; }

.tabele { width: 500px; margin: 0 auto; height: 85px; padding: 10px; margin-top: -3px; border-radius: 8px; background-image: url(resim.png); }

 

Linkteki örnekten faydalanabilirsin.

CSS3 Swing Effect

Teşekkürler. Bu örnekteki animasyonun hızını yavaşlatıp ani bir şekilde sallanma değilde hafif bir şekilde ve devamlı bir şekilde nasıl sallandırabiliriz?

Sallanma olayını javascript ile bir function içine değiskene alirsin ve bir şart koyarsın sınırsız döngüyle aynı olayı sürekli yapar.Sonrada o değişkeni sallanma kodlarını yazdığın kodların yerinde çağırarak işi halledersin.Bu şekilde de sorun çözülür.

 

 

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git