Здесь создает простое решение с приветствием или с новостями на сайте, вообщем тот эффект, который должны все заметить при заходе на сайт и также открытие страницы. Использование CSS3 Animations для установки постепенной анимации с использованием итераций и ключевых кадров.
Что с небольшого элемента разворачивается заданный дист с описанием, где также задаем время для прочтение, хотя если кратко, то все по умолчанию отлично подойдет.
HTML
Код
<div class="radualamation-sosegnimation"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
Здесь идет приветствие
</font></font></div>
CSS
Код
.radualamation-sosegnimation {
height: 58px;
padding: 9px;
-webkit-animation-name: movearound;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease;
}
@-webkit-keyframes movearound {
from {
width: 198px;
background: #dc1515;
opacity: 0.5;
-webkit-transform: scale(0.5) rotate(15deg);
}
to {
width: 398px;
background: #f169b9;
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
Демонстрация
