Pyzon: How to make bouncing text using css on blogger

How to make bouncing text using css on blogger

<style style="text/css">
.move-side {
height: 50px;
overflow: hidden;
position: relative;
background:inherit;
color: inherit;
border: 1px solid inherit;
}
.move-side p {
position: absolute;
width: 100%;
height: 100%;
margin: inherit;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(50%);
-webkit-transform:translateX(50%);
transform:translateX(50%);
/* Apply animation to this element */
-moz-animation: move-side 5s linear infinite alternate;
-webkit-animation: move-side 5s linear infinite alternate;
animation: move-side 5s linear infinite alternate;
}
/* Move it (define the animation) */
@-moz-keyframes move-side {
0% { -moz-transform: translateX(60%); }
100% { -moz-transform: translateX(-80%); }
}
@-webkit-keyframes move-side {
0% { -webkit-transform: translateX(80%); }
100% { -webkit-transform: translateX(-60%); }
}
@keyframes move-side {
0% {
-moz-transform: translateX(50%); /* Browser bug fix */
-webkit-transform: translateX(50%); /* Browser bug fix by Pyzon*/
transform: translateX(50%);
}
100% {
-moz-transform: translateX(-50%); /* Browser bug fix by Pyzon */
-webkit-transform: translateX(-50%); /* Browser bug fix by Pyzon */
transform: translateX(-50%);
}
}
</style>

<div class="move-side">
<p>bouncing css..</p>
</div>

#Enjoy

---

How to make bouncing text using css on blogger

---

share this article to: Google+ Whatsapp

Do you enjoy our Article! and need to share to your love once offline, whatsapp, Facebook and also store in your phone etc

Go back to the previous page

Published by Pyzon,at 07:21 and have 0 comments