Тема: анімація в 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) } }*/
Post's attachments

style.css 983 b, 48 downloads since 2016-10-24 

2

Re: анімація в html

Що не так?
https://jsfiddle.net/r5nzmkfg/

Подякували: 221VOLT1

3

Re: анімація в html

koala написав:

Що не так?
https://jsfiddle.net/r5nzmkfg/

не так те що воно не збільшується по дорозі
але тут http://codepen.io/anon/pen/dpaqXy
воно збільшується але не переміщується
а якщо розкоментити пересування то навпаки переміщується але не збільшується

4

Re: анімація в html

Думаю, що така реалiзацiя малась на увазi ?)
https://jsfiddle.net/doow53d5/

5

Re: анімація в html

Ostapchuk написав:

Думаю, що така реалiзацiя малась на увазi ?)
https://jsfiddle.net/doow53d5/

хм) схоже на то) тільки по діагоналі з нижнього лівого краю до верхнього правого