CSS3 transition effects

+1 Ankit Lohani · November 7, 2014
Hi guys, I have recently been to the site www.ktj.in. Just as you click this link, u will find that a wheel is rotating in the home page. I want to know if that effect can be brought by css3 or not? If yes, plz tell me how.

Post a Reply


Oldest  Newest  Rating
+2 Yousef Al-Hadhrami · November 10, 2014
You can know what tag is the reason of that by clicking Inspect Element on it using firefox
here is the result :

#loading-center-circle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(180deg, rgba(50, 100, 148, 0.8), rgba(72, 136, 199, 0.8)) repeat scroll 0% 0% transparent;
    border-radius: 500px;
    width: 0px;
    height: 0px;
    z-index: 1001;
    box-shadow: 2px 2px 10px #000;
    animation: 12s linear 0s normal none infinite running myrotateReverse;

the animation tag is responsible for that, but I suggest that you use JavaScript instead because animation/transition and other cool new CSS features are not availabe on old browsers, and there is a great amount of users using the lame old IE6-8

you can see in what version the animation tag was introduced in this page:
  • 1

HTML / CSS / Web Design


Discuss, share, ask, learn and teach HTML5 and CSS3.