+ 5
How to make a dancing style text in css? In animation part which attribute is needed for up and down dancing text in HTML?
3 Answers
+ 1
When you specify CSS styles inside the @keyframe rule, them animation will change from the current style to the new at certain times.
For example if you want to animate a div(square) in HTML you just need to define it.
<div><\div>
And in the CSS:
@keyframes example {
0% {left: 0px; top: 0px;}
50% {left: 0px; top: 100px;}
100% {left: 0px; top: 0px;}
}
/* The % is for time part of the duration */
div{
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
}
You can have other animation-attributes such as duration, delay, direction etc.
+ 1
h1{
animation: dance 1s linear infinite;
}
@keyframes dance{
0%{transform: rotate(0)}
25%{transform: rotate(-5deg)}
50%{transform: rotate(0deg)}
75%{transform: rotate(5deg)}
100%{transform: rotate(0deg)}
}
maybe this would help?
+ 1
what do you mean? like each letter