Тема: анімація в html
завдання полягає в тому, що потрібно перемістити коло з одного кінця в інший поступово збільшуючи розмір кола.
Я використовувала transform, але проблема в тому що не можу одночасно пересувати і збільшувати коло
html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Round</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="axis" class="five">
<img class="object plane van move-ne scala kolo" "alt=""/>
</div>
</div>
</body>
</html>css
.object {
position: absolute;
transition: all 2s linear:;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
.kolo{
top: 0.1%;
left: 0%;
width:100px;
height:100px;
background-color:red;
border-radius:50px;
}
.van {
top: 89%;
left: 0%;
}
.plane {
position: absolute;
left:10px;
bottom: 10px;
}
#axis:hover .move-ne {
transform: translate(1624px,-850px);}
#axis:hover .scala {
transform: scale(2);
transition:all 0.5s ease-out;
}
/*#axis:hover .move-ne {
transform: translate(350px,-350px);
-webkit-transform: translate(350px,-350px);
-o-transform: translate(350px,-350px);
-moz-transform: translate(350px,-350px);
}*/
/*
@-webkit-keyframes orbit {
from { -webkit-transform:rotate(0deg) }
to { -webkit-transform:rotate(360deg) } }*/
