CSS Анимация/Перемещение изображения вверх по экрану с помощью @KEYFRAMES

Привет Я пытаюсь переместить изображение вверх по экрану с помощью CSS. В настоящее время, когда я запускаю его, он появляется только в верхней части страницы. Вот код, который я пытаюсь сделать. Я пытаюсь запустить это в хроме.CSS Анимация/Перемещение изображения вверх по экрану с помощью @KEYFRAMES

<head> 

<style> 
#float{ 
width: 200px; 
height: 500px; 
position: relative; 
animation: floatBubble 2s inifnate; 
animation-directon: normal; 
} 


@keyframes floatBubble{ 
0% { 
     top:0; 
     -webkit-animation-timing-function: ease-in; 

    } 


    100% { 
     top: 500px; 
     animation-timing-function: ease-out; 
    } 

} 
</style> 

</head> 
<body style="background-color:#FF9900; color:#CC0033; text-align:center"> 

<div id="float"> 
<img src ="bub.png" height="100px" width="100px" alt="bubbles"> 
</div> 

</body>

источник

2013-05-28 user2241862

путь к буквам 'infinite' дружище. : P также, у вас префикс поставщика на 0%, а не на 100%? и я предполагаю, что ур говорит винт u 60% людей, которые не используют Chrome/Safari из-за отсутствия других префиксов поставщиков? – PlantTheIdea

Попробуйте это:

Working Example

#float { 
    position: relative; 
    -webkit-animation: floatBubble 2s infinite normal ease-out; 
    animation: floatBubble 2s infinite normal ease-out; 
} 
@-webkit-keyframes floatBubble { 
    0% { 
     top:500px; 
    } 
    100% { 
     top: 0px; 
    } 
} 
@keyframes floatBubble { 
    0% { 
     top:500px; 
    } 
    100% { 
     top: 0px; 
    } 
}

источник

2013-05-28 17:03:54 apaul

Спасибо, это именно то, что я пытался сделать. Я очень ценю это. – user2241862

изменить это

animation: floatBubble 2s inifnate;

к этому

animation: floatBubble 25s infinite;

также, если вы пытаетесь переместить его вверх по экрану, вместо 500px, изменения в -500px

источник

2013-05-28 16:39:04 bob

Благодарим вас за предложения! – user2241862

Проверьте это:

CSS:

<style> 
#float{ 
position: relative; 
-webkit-animation: floatBubble 2s infinite; 
    -webkit-animation-direction:alternate; 
    } 


@-webkit-keyframes floatBubble{ 
from{ 
     top:0; 
     -webkit-animation-timing-function: ease-in; 

    } 


    to { 
     top: 200px; 
     -webkit-animation-timing-function: ease-out; 
    } 

} 
</style>

Я думаю, что это то, что вы хотите;)

Demo

источник

2013-05-28 16:56:45 Arpit

Спасибо, я очень ценю ваш тщательный ответ! Это очень полезно. – user2241862

CSS Анимация/Перемещение изображения вверх по экрану с помощью @KEYFRAMES

ответ

Смежные вопросы