“Вращающаяся текстовая анимация” Ответ

Вращающаяся текстовая анимация

@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
	20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}
Smiling Squirrel

Вращающаяся текстовая анимация

.rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: 100%;
	color: #6b969d;
}
Smiling Squirrel

Вращающаяся текстовая анимация

.rw-sentence span{
	color: #444;
	white-space: nowrap;
	font-size: 200%;
	font-weight: normal;
}
Smiling Squirrel

Вращающаяся текстовая анимация

@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
	25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}
Smiling Squirrel

Вращающаяся текстовая анимация

.rw-words{
	display: inline;
	text-indent: 10px;
}
Smiling Squirrel

Вращающаяся текстовая анимация

.rw-sentence{
	margin: 0;
	text-align: left;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
Smiling Squirrel

Ответы похожие на “Вращающаяся текстовая анимация”

Вопросы похожие на “Вращающаяся текстовая анимация”

Больше похожих ответов на “Вращающаяся текстовая анимация” по CSS

Смотреть популярные ответы по языку

Смотреть другие языки программирования