+ 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?

27th Nov 2018, 5:11 PM
DIPTIRANI SAHU
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.
27th Nov 2018, 5:59 PM
Panayot Zhaltov
Panayot Zhaltov - avatar
+ 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?
28th Nov 2018, 1:33 AM
Lucy
Lucy - avatar
+ 1
what do you mean? like each letter
28th Nov 2018, 1:46 PM
Lucy
Lucy - avatar