<html>
<body>
<div id=container>
Make
<div id=flip>
<div>
<div>wOrK</div>
</div>
<div>
<div>lifeStyle</div>
</div>
<div>
<div>Everything</div>
</div>
</div>
AweSoMe!
</div>
<p>a css3 animation demo</p>
<style>
body {
margin: 0px;
font-family: 'Roboto';
text-align: center;
}
#container {
color: #999;
text-transform: uppercase;
font-size: 36px;
font-weight: bold;
padding-top: 200px;
position: fixed;
width: 100%;
bottom: 45%;
display: block;
}
#flip {
height: 50px;
overflow: hidden;
}
#flip>div>div {
color: #fff;
padding: 4px 12px;
height: 45px;
margin-bottom: 45px;
display: inline-block;
}
#flip div:first-child {
animation: show 5s linear infinite;
}
#flip div div {
background: #42c58a;
}
#flip div:first-child div {
background: #4ec7f3;
}
#flip div:last-child div {
background: #DC143C;
}
@keyframes show {
0% {
margin-top: -270px;
}
5% {
margin-top: -180px;
}
33% {
margin-top: -180px;
}
38% {
margin-top: -90px;
}
66% {
margin-top: -90px;
}
71% {
margin-top: 0px;
}
99.99% {
margin-top: 0px;
}
100% {
margin-top: -270px;
}
}
p {
position: fixed;
width: 100%;
bottom: 30px;
font-size: 12px;
color: #999;
margin-top: 200px;
}
</style>
</body>
</html>
Css text animation
Reviewed by Network security
on
May 19, 2019
Rating:
Reviewed by Network security
on
May 19, 2019
Rating:
No comments: