انیمیشن در css
با یک مثال کار را شروع میکنیم
یک مربع داخل مربع دیگر میسازیم و این css ها را به انها میدهیم
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title></title>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=””>
<style>
#dad{
background-color: aqua;
width: 400px;
height: 400px;
}
#child{
background-color: #f00;
width: 200px;
height: 200px;
transition: transform 1s;
}
#dad:hover #child{
transform: translate(0,100%);
}
</style>
</head>
<body>
<div id=”dad”>
<div id=”child”></div>
</div>
</body>
</html>
به هر کدام از div ها ابعاد و بگراند خاص خودشان را دادیم
میخواهیم زمانی که موس روی div با ای دی dad رفت
مربع child جابجا شود
با استفاده از دستور
transform: translate(0,100%);
مقدار اول در پرانتز محور x و مقدار دوم محور Y است
روش دوم با استفاده از keyframes
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title></title>
<meta name=”description” content=””>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=””>
<style>
#dad{
background-color: aqua;
width: 400px;
height: 400px;
}
#child{
background-color: #f00;
width: 200px;
height: 200px;
transition: transform 1s;
animation: aname 2s infinite;
}
#dad:hover #child{
}
@keyframes aname {
0%{
transform: translate(0,0) ;
}
25%{
transform: translate(100%,0) rotate(90deg);
}
50%{
transform: translate(100%,100%);
}
75%{
transform: translate(0,100%);
}
100%{
transform: translate(0,0);
}
}
</style>
</head>
<body>
<div id=”dad”>
<div id=”child”></div>
</div>
</body>
</html>
در این مثال در هر درصد مشخص میکنیم که به یک گوشه از تصویر برود
و باید بدانید که باید اسم بعد از کی فریم با نام در خاصیت انیمیشن که در مثال بالا در مربع چایلد مقدار دهی شده برابر باشد
@keyframes aname
که در اینجا
aname
است
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.