+ 1

I want to transform text...but it is not working properly. ..please help me..

<html> <head> <title> test </title> <style> body { } h1 { text-align:center; color:violet; animation-name:colorchange; animation-iteration-count:infinite; transform:translate (100px,50px); transform:rotate (360deg); } @keyframes colorchange { 0%{color:violet;} 25%{color:blue;} 75%{color:yellow;} 100%{color:red;} } </style> </head> <body> <h1> hello</h1> </body> </html>

css html5

21st May 2017, 2:02 PM

Krishna Teja

7 Answers

+ 20

<html> <head> <title> test </title> <style> body { } h1 { text-align:center; color:violet; animation-name:colorchange; animation-iteration-count:infinite; animation-duration:2,5s; animation-direction:alternate; transform:translate (100px,50px); transform:rotate (360deg); -webkit-animation-name:colorchange; -webkit-animation-iteration-count:infinite; -webkit-animation-duration:2,5s; -webkit-animation-direction:alternate; -webkit-transform:translate(100px,50px); -webkit-transform:rotate(360deg); } @keyframes colorchange { 0%{color:violet;} 25%{color:blue;} 75%{color:yellow;} 100%{color:red;} } @-webkit-keyframes colorchange { from{color:violet;} 25%{color:blue;} 75%{color:yellow;} to{color:red;} } </style> </head> <body> <h1> hello</h1> </body> </html>

21st May 2017, 2:36 PM

Valen.H. ~

+ 14

Vendor prefixes....

21st May 2017, 2:06 PM

Valen.H. ~

+ 2

@valentinHacker thanx for your answer..but where I should place the vendor prefix (-o-,-moz-, etc..)

21st May 2017, 2:26 PM

Krishna Teja

+ 2

Use animation: colorchange 5s linear 0s infinite; in h1 and also try change to (without spacing between) transform:translate(100px,50px); transform:rotate(300deg); (transform:rotate(360deg); is rotate one full round you would not see any transform)

21st May 2017, 2:30 PM

Calviղ