<animate dur='xxx'> увидишь... 
<div class="heading">
<p>hello, world!!</p>
<p>fuck the world</p>
<p>fuck everything</p>
</div>.heading {
display: inline-block;
position: relative;
width: 900px;
height: 70px;
background: red;
overflow: hidden;
font-size: 60px;
}
.heading > p {
text-transform: uppercase;
color: #fefefe;
position: absolute;
width: 900px;
top: 0;
left: 0;
animation: text 6s infinite;
margin: 0;
padding: 0;
}
.heading > p:nth-child(1) { animation-delay: 0s; }
.heading > p:nth-child(2) { animation-delay: -4s; }
.heading > p:nth-child(3) { animation-delay: -2s; }
@keyframes text {
0% {
opacity: 1;
}
25%, 100% {
margin-left: 50px;
opacity: 0;
}
}
Что лучше использовать SVG или PNG для Логотипа ?Лучше, подозреваю, что SVG. Так как SVG - это векторный формат и он хорошо выглядит на любом разрешении, в т.ч. на телефонах, у которых разрешение физическое может быть очень высоким, а фактическое - в несколько раз меньше.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
span {
background: linear-gradient(to right, #ccc 0%, #ccc 50%, #fff 50%, #fff);
background-size: 200% 100%;
background-position: 100% 0;
transition: background-position .5s cubic-bezier(.56,.08,.42,.7);
}
span:hover {
background-position: 0 0;
}