css animations & transitions (heart shake animation)
imadbelasri
Css
CS
فهاد ل projet الجديد من سلسلة css transitions & animations غادي نقادو heart shake animation ب css لي هي (قلب متحرك)
ولي سبق ودرناه فالقناة فاليوتيوب ولي ممكن تشوف الشرح المفصل ديالو فالفيديو المرفق.
نظرة سريعة بالفيديو
1- إضافة index.html
أول حاجة زيد dossier جديد سميه لي بغيتي فيه زيد fichier index.html لي هو الصفحة الرئيسية ولي فيه ل image لي عبارة عن قلب ولي إسترجعناها من www.pixabay.com ولي ممكن تخدم بها أو بغيرها.
الكود ديال الملف هو :
//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Shake Animation</title>
</head>
<body>
<div class="container">
<img src="https://cdn.pixabay.com/photo/2017/02/15/20/58/ekg-2069872__340.png" alt="" srcset="">
</div>
</body>
</html>
2- إضافة الملف STYLE.CSS
منبعد زيد الملف style.css لي غادي يكون فيه style css لي غادي يمكنا باش نزيدو shake animation ل image ديالنا.
الكود ديال الملف هو :
//
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container{
width: 300px;
height: 300px;
border-radius: 10px;
overflow: hidden;
}
.container img{
width: 100%;
height: 100%;
}
.container:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}