I have a spinning gear on my website displayed with this code:

    

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;link rel=&quot;stylesheet&quot;
     href=&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css&quot;/&gt;

    &lt;i class = &quot;fa fa-cog fa-5x fa-spin&quot;&gt;&lt;/i&gt;

&lt;!-- end snippet --&gt;

Personally, I think that the speed of the gear is too fast. Can I modify it with CSS?

Can we modify a Font Awesome spin speed?

I&#39;m trying to transition on hover with css over a thumbnail so that on hover, the background gradient fades in. The transition isn&#39;t working, but if I simply change it to an `rgba()` value, it works fine. Are gradients not supported? I tried using an image too, it won&#39;t transition the image either.

I know it&#39;s possible, as in another post someone did it, but I can&#39;t figure out how exactly. Any help&gt; Here&#39;s some CSS to work with:

    


&lt;!-- language: lang-css --&gt;

    #container div a {
      -webkit-transition: background 0.2s linear;
      -moz-transition: background 0.2s linear;
      -o-transition: background 0.2s linear;
      transition: background 0.2s linear;
      position: absolute;
      width: 200px;
      height: 150px;
      border: 1px #000 solid;
      margin: 30px;
      z-index: 2
    }

    #container div a:hover {
      background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
    }




Use CSS3 transitions with gradient backgrounds

Is it possible to use CSS3 transition animation on page load without using Javascript?

**This is kind of what I want, but on page load:**

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

What I found so far

 - [CSS3 transition-delay][1], a way to delay effects on elements. Only works on hover.
 - [CSS3 Keyframe][2], works on load but are extremly slow. Not useful because of that.
 - [CSS3 transition][3] is fast enough but don&#39;t animate on page load.


  [1]: http://trentwalton.com/2010/03/30/css3-transition-delay/
  [2]: http://www.leemunroe.com/animation/animation3.html
  [3]: http://www.nealgrosskopf.com/tech/resources/45/

css3 transition animation on load?

I have a 4 part CSS3 animation playing on click  - but the last part of the animation is meant to take it off the screen. 

However, it always goes back to its original state once it has played. Anyone know how I can **stop it on its last css frame (100%)**, or else how to get rid of the whole div it is in once it has played. 

    @keyframes colorchange {
      0%   { transform: scale(1.0) rotate(0deg); }
      50%  { transform: rotate(340deg) translate(-300px,0px) }
      100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
    }
    

Stopping a CSS3 Animation on last frame

How can I have two CSS animations playing **at different speeds**?

 - The image should be rotating and growing at the same time.  
 - The rotation will cycle every 2 seconds. 
 - The growth will cycle every 4 seconds.

Example Code:

    .image {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 120px;
        height: 120px;
        margin:-60px 0 0 -60px;
        -webkit-animation:spin 2s linear infinite;
        -webkit-animation:scale 4s linear infinite;
    }
    
    @-webkit-keyframes spin { 
        100% { 
            transform: rotate(180deg);
        } 
    }
    
    @-webkit-keyframes scale {
        100% {
             transform: scaleX(2) scaleY(2);
        }
    }


http://jsfiddle.net/Ugc5g/3388/ - only one animation (the last one declared) plays.

Play multiple CSS animations at the same time

So, I understand how to perform both CSS3 [transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) and [animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations). What is not clear, and I&#39;ve googled, is when to use which. 

For example, if I want to make a ball bounce, it is clear that animation is the way to go. I could provide keyframes and the browser would do the intermediates frames and I&#39;ll have a nice animation going.

However, there are cases when a said effect can be achieved either way. A simple and common example would be implement the facebook style sliding drawer menu: 

This effect can be achieved through transitions like so:

    .sf-page {
        -webkit-transition: -webkit-transform .2s ease-out;
    }
    
    .sf-page.out {
        -webkit-transform: translateX(240px);
    }

http://jsfiddle.net/NwEGz/

Or, through animations like so:

    .sf-page {
        -webkit-animation-duration: .4s;
        -webkit-transition-timing-function: ease-out;
    }
    
    .sf-page.in {
    	-webkit-animation-name: sf-slidein;
    	-webkit-transform: translate3d(0, 0, 0);
    }

    .sf-page.out {
        -webkit-animation-name: sf-slideout;
        -webkit-transform: translateX(240px);
    }

    @-webkit-keyframes sf-slideout {
        from { -webkit-transform: translate3d(0, 0, 0);	}
        to { -webkit-transform: translate3d(240px, 0, 0); }
    }
     
    @-webkit-keyframes sf-slidein {
        from { -webkit-transform: translate3d(240px, 0, 0); }
        to { -webkit-transform: translate3d(0, 0, 0); }
    }


http://jsfiddle.net/4Z5Mr/

With HTML that looks like so:

    &lt;div class=&quot;sf-container&quot;&gt;
        &lt;div class=&quot;sf-page in&quot; id=&quot;content-container&quot;&gt;
            &lt;button type=&quot;button&quot;&gt;Click Me&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;sf-drawer&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;

And, this accompanying jQuery script:

    $(&quot;#content-container&quot;).click(function(){
        $(&quot;#content-container&quot;).toggleClass(&quot;out&quot;);
        // below is only required for css animation route
        $(&quot;#content-container&quot;).toggleClass(&quot;in&quot;);
    });

What I&#39;d like to understand is what are the pros and cons of these approaches. 

 1. One obvious difference is that animating is taking a whole lot more code. 
 2. Animation gives better flexibility. I can have different animation for sliding out and in
 3. Is there something that can be said about performance. Do both take advantage of h/w acceleration?
 4. Which is more modern and the way going forward
 5. Anything else you could add?

CSS: Animation vs. Transition

I have reviewed quite a few demos and have no idea why I can&#39;t get the CSS3 spin to function. I am using the latest stable release of Chrome.

The fiddle:
http://jsfiddle.net/9Ryvs/1/

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    div {
      margin: 20px;
      width: 100px;
      height: 100px;
      background: #f00;
      -webkit-animation-name: spin;
      -webkit-animation-duration: 40000ms;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -moz-animation-name: spin;
      -moz-animation-duration: 40000ms;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;
      -ms-animation-name: spin;
      -ms-animation-duration: 40000ms;
      -ms-animation-iteration-count: infinite;
      -ms-animation-timing-function: linear;
      -o-transition: rotate(3600deg);
    }

&lt;!-- language: lang-html --&gt;

    &lt;div&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;



CSS3 Spin Animation

I really want to make a piece of text blink the old-school style without using javascript or text-decoration. 

No transitions, only *blink\*, *blink\*, *blink\*!

---

This is different from [that question](https://stackoverflow.com/questions/16344354) because I ask for *blinking* without continuous transitions, whereas OP of the other questions asks how to *replace* blinking *with continuous transitions*

Blurry text after using CSS transform: scale(); in Chrome

Something this simple should be easily accomplished, yet I&#39;m pulling my hair out over how complicated it is.

All I want to do is animate the mounting &amp; unmounting of a React component, that&#39;s it. Here&#39;s what I&#39;ve tried so far and why each solution won&#39;t work:

1. `ReactCSSTransitionGroup` - I&#39;m not using CSS classes at all, it&#39;s all JS styles, so this won&#39;t work.
2. `ReactTransitionGroup` - This lower level API is great, but it requires you to use a callback when the animation is complete, so just using CSS transitions won&#39;t work here. There are always animation libraries, which leads to the next point:
3. GreenSock - The licensing is too restrictive for business use IMO.
4. React Motion - This seems great, but `TransitionMotion` is extremely confusing and overly complicated for what I need.
5. Of course I can just do trickery like Material UI does, where the elements are rendered but remain hidden (`left: -10000px`) but I&#39;d rather not go that route. I consider it hacky, and I *want* my components to unmount so they clean up and are not cluttering up the DOM.

I want something that&#39;s *easy* to implement. On mount, animate a set of styles; on unmount, animate the same (or another) set of styles. Done. It also has to be high performance on multiple platforms.

I&#39;ve hit a brick wall here. If I&#39;m missing something and there&#39;s an easy way to do this, let me know.

React - animate mount and unmount of a single component

I&#39;ve had a look around but can&#39;t quite find what i&#39;m looking for.

I currently have a css animation on my page which is triggered by :hover. I would like this to change to &#39;click&#39; or &#39;touch&#39; when the page is resized past width 700px using media queries.

Here is what i have at the moment: http://jsfiddle.net/danieljoseph/3p6Kz/

As you can see, the :hover will not work on mobile devices but i still want to ensure it works the same way just by click, not hover.

I would rather use css if possible but happy with JQuery also.

I have a feeling this is very easy to do but i am just missing something very obvious! Any help would be appreciated.

Here is the css animation:

&lt;!-- language: lang-css --&gt;

    .info-slide {
      position:absolute;
      bottom:0;
      float:left;
      width:100%;
      background:url(../images/blue-back.png);
      height:60px;
      cursor:pointer;
      overflow:hidden;
      text-align:center;
      transition: height .4s ease-in-out;
      -webkit-transition: height .4s ease-in-out;
      -moz-transition: height .4s ease-in-out;
    }
    
    .info-slide:hover {
      height:300px;
    }




Changing :hover to touch/click for mobile devices

I&#39;m trying to get a CSS animation property to stay after completing, is this possible?

This is what I&#39;m trying to achieve...

The element should be hidden when the user lands on the page, after 3 seconds (or whatever), it should fade in and once the animation has completed it should stay there.

Here is a fiddle attempt...
http://jsfiddle.net/GZx6F/

Here is the code for preservation...

    &lt;h2&gt;Test&lt;/h2&gt;

    &lt;style&gt;
	@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 0.9;
		}
	}
		
	h2 {
		animation: fadeIn 1s ease-in-out 3s;
	}
    &lt;/style&gt;

I know how to do this with jQuery.. it would be like this...

    &lt;h2&gt;test&lt;/h2&gt;

    &lt;script&gt;
      $(document).ready(function(){
        $(&#39;h2&#39;).hide().delay(3000).fadeIn(3000)
      });
    &lt;/script&gt;



CSS Animation property stays after animating

I&#39;m trying to have an ellipsis animate, and was wondering if it was possible with CSS animations...

So it might be like

    Loading...
    Loading..
    Loading.
    Loading...
    Loading..

And basically just continue like that. Any ideas?

Edit: like this: http://playground.magicrising.de/demo/ellipsis.html

Is there anyway to animate an ellipsis with CSS animations?

Is there any way to implement a callback function in case of css3 animation? In case of Javascript animation its possible but not finding any way to do it in css3.

One way I could see is to execute callback after the animation duration but that doesn&#39;t make sure that it will always be called right after the animation ends. It will depend on the browser UI queue. I want a more robust method. Any clue?

Is there a callback on completion of a CSS3 animation?

I&#39;ve recently discovered how to &quot;properly&quot; use CSS animations (previously I dismissed them as not being able to make complex sequences like you could in JavaScript). So now I&#39;m learning about them.

For this effect, I&#39;m trying to have a gradient &quot;flare&quot; sweep across a progress bar-like element. Similar to the effect on native Windows Vista/7 progress bars.

    @keyframes barshine {
      from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
      to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
    }
    .progbar {
      animation: barshine 1s 4s linear infinite;
    }

As you can see, I am trying to have a delay of 4 seconds, followed by the shine sweeping across in 1 second, repeated.

However, it seems that the `animation-delay` only applies to the first iteration, after which the shine just keeps sweeping across repeatedly.

I &quot;resolved&quot; this issue as follows:

    @keyframes expbarshine {
      from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
      80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
      to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
    }
    .progbar {
      animation: barshine 5s linear infinite;
    }

`from` and `80%` are exactly the same, resulting in a &quot;delay&quot; of 80% of the animation length.

This works, but for my next animation, I need the delay to be variable (constant for a particular element, but variable among elements that use the animation), while the animation itself stays exactly the same length.

With the above &quot;solution&quot;, I would end up with a slower animation when all I want is a longer delay.

Is it possible to have the `animation-delay` apply to all iterations, rather than just the first?

CSS animation delay in repeating

I can scroll to 200px using the following


    btn.addEventListener(&quot;click&quot;, function(){
        window.scrollTo(0,200);
    })

But I want a smooth scroll effect. How do I do this?

How to window.scrollTo() with a smooth effect

I write a css3 animation and it is only performed once. The animation works well, but it will reset when the animation finished. How can I avoid this, I want to keep the result instead of reset it.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    $(function() {
      $(&quot;#fdiv&quot;).delay(1000).addClass(&quot;go&quot;);
    });

&lt;!-- language: lang-css --&gt;

    #fdiv {
      width: 10px;
      height: 10px;
      position: absolute;
      margin-left: -5px;
      margin-top: -5px;
      left: 50%;
      top: 50%;
      background-color: red;
    }

    .go {
      -webkit-animation: spinAndZoom 1s 1;
    }

    @-webkit-keyframes spinAndZoom {
      0% {
        width: 10px;
        height: 10px;
        margin-left: -5px;
        margin-top: -5px;
        -webkit-transform: rotateZ(0deg);
      }
      100% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        -webkit-transform: rotateZ(360deg);
      }
    }

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&quot;&gt;&lt;/script&gt;

    &lt;div id=&quot;fdiv&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;

Here is the [demo][1].

  [1]: http://jsfiddle.net/KCbFf/

How to prevent css3 animation reset when finished?

I&#39;m running an animation on some elements that are set to `opacity: 0;` in the CSS. The animation class is applied onClick, and, using keyframes, it changes the opacity from `0` to `1` (among other things).

Unfortunately, when the animation is over, the elements go back to `opacity: 0` (in both Firefox and Chrome). My natural thinking would be that animated elements maintain the final state, overriding their original properties. Is this not true? And if not, how can I get the element to do so?

The code (prefixed versions not included):

    @keyframes bubble {
        0%   { transform:scale(0.5); opacity:0.0; }
        50%  { transform:scale(1.2); opacity:0.5; }
        100% { transform:scale(1.0); opacity:1.0; }
    }

Maintaining the final state at end of a CSS3 animation

I am creating a rotating earth effect in CSS. I have created the globe in CSS : 

&lt;!-- begin snippet: js hide: false console: false babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      background-color: #111;
    }

    #earth {
        width: 300px;
        height: 300px;
        background: url(https://web.archive.org/web/20150807125159if_/http://www.noirextreme.com/digital/Earth-Color4096.jpg);
        border-radius: 50%;
        background-size: 610px;
        box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0),
        inset -6px 0 12px 4px rgba(255, 255, 255, 0.3);
        animation-name: rotate;
        animation-duration: 12s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        -webkit-animation-name: rotate;
        -webkit-animation-duration: 12s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
    }

    @keyframes rotate {
        from { background-position: 0px 0px; }
        to { background-position: 500px 0px; }
    }
    @-webkit-keyframes rotate {
        from { background-position: 0px 0px; }
        to { background-position: 500px 0px; }
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;earth&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;

**But it stops and then image resets and starts again. I want it to move smoothly without jerking. Thank you very much!**

Rotating globe in CSS

Currently, I have this code:

    @-webkit-keyframes blinker {
      from { opacity: 1.0; }
      to { opacity: 0.0; }
    }

    .waitingForConnection {
      -webkit-animation-name: blinker;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
      -webkit-animation-duration: 1.7s;
    }

It blinks, but it only blinks in &quot;one direction&quot;. I mean, it only fades out, and then it appears back with `opacity: 1.0`, then again fades out, appears again, and so on...

I would like it to fade out, and then &quot;raise&quot; from this fade back again to `opacity: 1.0`. Is that possible?


How to make blinking/flashing text with CSS 3

**tl;dr:** *I would like to create an actual 3d sphere with CSS - not just an illusion*

Note: some of the snippet examples are not responsive. Please use full screen. 


----------


With pure CSS you can **create and animate**  a 3d cube like so:



&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #cube-wrapper {
      position: absolute;
      left: 50%;
      top: 50%;
      perspective: 1500px;
    }

    .cube {
      position: relative;
      transform-style: preserve-3d;
      animation-name: rotate;
      animation-duration: 30s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    @keyframes rotate {
      0% {
        transform: rotate3d(0, 0, 0, 0);
      }
      100% {
        transform: rotate3d(0, 1, 0, 360deg);
        ;
      }
    }

    .face {
      position: absolute;
      width: 200px;
      height: 200px;
      border: solid green 3px;
    }

    #front_face {
      transform: translateX(-100px) translateY(-100px) translateZ(100px);
      background: rgba(255, 0, 0, 0.5);
    }

    #back_face {
      transform: translateX(-100px) translateY(-100px) translateZ(-100px);
      background: rgba(255, 0, 255, 0.5);
    }

    #right_face {
      transform: translateY(-100px) rotateY(90deg);
      background: rgba(255, 255, 0, 0.5);
    }

    #left_face {
      transform: translateY(-100px) translateX(-200px) rotateY(90deg);
      background: rgba(0, 255, 0, 0.5);
    }

    #top_face {
      transform: translateX(-100px) translateY(-200px) rotateX(90deg);
      background: rgba(0, 255, 255, 0.5);
    }

    #bottom_face {
      transform: translateX(-100px) rotateX(90deg);
      background: rgba(255, 255, 255, 0.5);
    }

    .cube {
      transform: rotateX(90deg) rotateY(90deg);
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;cube-wrapper&quot;&gt;
      &lt;div class=&quot;cube&quot;&gt;
        &lt;div id=&quot;front_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;right_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;back_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;left_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;top_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;bottom_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

**I want to create and animate a 3d sphere in the same manner.**

So... the first idea I get is to use `border-radius` and...well... it doesn&#39;t work. 




&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #cube-wrapper {
      position: absolute;
      left: 50%;
      top: 50%;
      perspective: 1500px;
    }

    .cube {
      position: relative;
      transform-style: preserve-3d;
      animation-name: rotate;
      animation-duration: 30s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    @keyframes rotate {
      0% {
        transform: rotate3d(0, 0, 0, 0);
      }
      100% {
        transform: rotate3d(0, 1, 0, 360deg);
       
        ;
      }
    }


    .face {
      position: absolute;
      width: 200px;
      height: 200px;
      border: solid green 3px;
      border-radius: 100vw
    }


     

    #front_face {
      transform: translateX(-100px) translateY(-100px) translateZ(100px);
      background: rgba(255, 0, 0, 0.5);
    }

    #back_face {
      transform: translateX(-100px) translateY(-100px) translateZ(-100px);
      background: rgba(255, 0, 255, 0.5);
    }

    #right_face {
      transform: translateY(-100px) rotateY(90deg);
      background: rgba(255, 255, 0, 0.5);
    }

    #left_face {
      transform: translateY(-100px) translateX(-200px) rotateY(90deg);
      background: rgba(0, 255, 0, 0.5);
    }

    #top_face {
      transform: translateX(-100px) translateY(-200px) rotateX(90deg);
      background: rgba(0, 255, 255, 0.5);
    }

    #bottom_face {
      transform: translateX(-100px) rotateX(90deg);
      background: rgba(255, 255, 255, 0.5);
    }

    .cube {
      transform: rotateX(90deg) rotateY(90deg);
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;cube-wrapper&quot;&gt;
      &lt;div class=&quot;cube&quot;&gt;
        &lt;div id=&quot;front_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;right_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;back_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;left_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;top_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;bottom_face&quot; class=&quot;face&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;


So, I reconsidered my approach and looked for a different method. 

I looked at:

 - https://stackoverflow.com/questions/29300573/implementing-pure-css-sphere-into-website-how-do-i-do-it
 - https://stackoverflow.com/questions/30891893/how-to-create-a-sphere-in-css
 - [Display an image wrapped around a sphere with CSS/Javascript
   ](https://stackoverflow.com/a/24561907/8157693)
 - [cssanimation.rocks - CSS spheres](https://cssanimation.rocks/spheres/)
 - [MDN -
   Circle](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle)
 

 

Then I tried again...the best I got were overly *complicated* 3d object **illusions**. 

Like this:

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      overflow: hidden;
      background: #333;
    }

    .wrapper {
      margin: 1em;
      animation-duration: 20s;
    }

    .planet,
    .planet:before,
    .planet:after {
      height: 300px;
      width: 300px;
      border-radius: 100vw;
      will-change: transform;
      margin: 0 auto;
    }

    .planet {
      box-shadow: inset 0px 0px 10px 10px rgba(0, 0, 0, 0.4);
      position: relative;
    }

    .wrapper,
    .planet,
    .planet:before {
      animation-name: myrotate;
      animation-duration: 20s;
    }

    .wrapper,
    .planet,
    .planet:before,
    .planet:after {
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    .planet:before,
    .planet:after {
      content: &#39;&#39;;
      position: absolute;
      top: 0;
      left: 0;
    }

    .planet:before {
      box-shadow: inset 20px 20px 100px 00px rgba(0, 0, 0, .5), 0px 0px 5px 3px rgba(0, 0, 0, .1);
    }

    .planet:after {
      filter: saturate(2.5);
      background: linear-gradient(rgba(0, 0, 0, 1), transparent), url(&quot;https://i.stack.imgur.com/eDYPN.jpg&quot;);
      opacity: 0.3;
      box-shadow: inset -20px -20px 14px 2px rgba(0, 0, 0, .2);
      animation-name: myopacity;
      animation-duration: 5000000s;
    }

    @keyframes myrotate {
      0% {
        transform: rotatez(0deg);
      }
      100% {
        transform: rotatez(360deg);
      }
    }

    @keyframes myopacity {
      0% {
        background-position: 0px;
        transform: rotatez(0deg);
      }
      50% {
        background-position: 100000000px;
      }
      100% {
        background-position: 0;
        transform: rotatez(-360deg);
      }
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;planet&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

And this:

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      background: #131418;
    }

    .wrapper {
      margin: 1em;
      max-width: 100%;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .planet,
    .planet:before,
    .planet:after {
      height: 500px;
      width: 500px;
      max-height: 30vw;
      max-width: 30vw;
      border-radius: 100vw;
      will-change: transform;
    }

    .planet {
      box-shadow: inset 0px 0px 100px 10px rgba(0, 0, 0, .5);
      position: relative;
      float: left;
      margin: 0 2em;
    }

    .planet,
    .planet:before,
    .planet:after {
      animation-name: myrotate;
      animation-duration: 10s;
    }

    .wrapper,
    .planet,
    .planet:before,
    .planet:after {
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    .planet:before,
    .planet:after {
      content: &#39;&#39;;
      position: absolute;
      top: 0;
      left: 0;
    }

    .planet:before {
      box-shadow: inset 50px 100px 50px 0 rgba(0, 0, 0, .5), 0 0 50px 3px rgba(0, 0, 0, .25);
      background-image: -webkit-radial-gradient( top, circle cover, #ffffff 0%, #000000 80%);
      opacity: .5;
    }

    .planet:after {
      opacity: .3;
      background-image: -webkit-radial-gradient( bottom, circle, #ffffff 0%, #000000 -200%);
      box-shadow: inset 0px 0px 100px 50px rgba(0, 0, 0, .5);
    }

    @keyframes myrotate {
      0% {
        transform: rotatez(0deg);
      }
      100% {
        transform: rotatez(-360deg);
      }
    }

    .bg {
      background: wheat;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;planet bg&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

Which are okay until you try to actually rotate them on either the **x-axis** or the **y-axis** like the cube in my first example...here&#39;s what happens then: (simplified example)

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .sphere {
      background: black;
      width: 300px;
      height: 300px;
      border-radius: 100vw;
      animation: myrotate 10s linear infinite
    }

    @keyframes myrotate {
      0% {
        transform: rotate3d(0, 0, 0, 0);
      }
      100% {
        transform: rotate3d(0, 1, 0, 360deg);
      }
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;sphere&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;


All you get is a flat 2d object - which is expeceted considering that it&#39;s what the element is


----------


The closest thing I found is the following shape created in a [tutorial by Timo Korinth][1] 

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    @-webkit-keyframes animateWorld {
      0% {
        -webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
      }
      50% {
        -webkit-transform: rotateY(360deg) rotateX(180deg) rotateZ(180deg);
      }
      100% {
        -webkit-transform: rotateY(720deg) rotateX(360deg) rotateZ(360deg);
      }
    }

    html {
      background: #FFFFFF;
    }

    . world {
      -webkit-perspective: 1000px;
    }

    .cube {
      margin-left: auto;
      margin-right: auto;
      position: relative;
      width: 200px;
      height: 200px;
      -webkit-transform-style: preserve-3d;
      -webkit-animation-name: animateWorld;
      -webkit-animation-duration: 10s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
    }

    .circle {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 2px dashed #009BC2;
      border-radius: 50%;
      opacity: 0.8;
      background: rgba(255, 255, 255, 0);
    }

    .zero {
      -webkit-transform: rotateX(90deg);
    }

    .two {
      -webkit-transform: rotateY(45deg);
    }

    .three {
      -webkit-transform: rotateY(90deg);
    }

    .four {
      -webkit-transform: rotateY(135deg);
    }

    .five {
      width: 173px;
      height: 173px;
      margin: 14px;
      -webkit-transform: rotateX(90deg) translateZ(50px);
    }

    .six {
      width: 173px;
      height: 173px;
      margin: 14px;
      -webkit-transform: rotateX(90deg) translateZ(-50px);
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;world&quot;&gt;
      &lt;div class=&quot;cube&quot;&gt;
        &lt;div class=&quot;circle zero&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle one&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle two&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle three&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle four&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle five&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;circle six&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;


----------


So here&#39;s my 

Question:
--------

**How do I create an actual 3 dimensional sphere with pure CSS? More specifically, one that is covered - not just a frame - and doesn&#39;t involve hundreds of html elements.** 


----------



**Notes:**  

 1. Three dimensional spheres have **height, width and depth** -  just
    like the cube in my first example snippet
 2. I don&#39;t need any physics and there&#39;s no need for any
    user-interaction. Just an animated spinning sphere.

----------


**Additional resources:**

 1. [paulrhayes.com - Spheres](https://paulrhayes.com/experiments/sphere/)
 2. [&lt;s&gt;3d&lt;/s&gt; (2d illusion) Earth with Rotating Animation with CSS][2]
 3. [Interactive CSS sphere][3]




  [1]: http://timokorinth.de/css-3d-sphere/
  [2]: http://w3bits.com/css-earth/
  [3]: http://robosparrow.github.io/Css3dSphere/


How can I create pure CSS 3-dimensional spheres?

Given the following CSS3 animation....

	&lt;style type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
	
	.drop_box {
	  -webkit-animation-name: drop;
	  -webkit-animation-duration: 2s;
	  -webkit-animation-iteration-count: 1;
	}
	
    @-webkit-keyframes drop {
 
      from {
        -webkit-transform: translateY(0px);
      }
 
      to {
        -webkit-transform: translateY(100px);
      }
 
    }
	&lt;/style&gt;
	
	&lt;div class=&quot;drop_box&quot;&gt;	
		Hello world
	&lt;/div&gt;

The Hello World text animates as expected dropping down 100px.  However, at the end of the animation it jumps back to its original position.

Clearly this makes sense in CSSland.  The animation has been applied and is no longer acting on the element so the original styles take effect.  It seems slightly odd to me though - surely if one is animating an element into place then one would expect that placing to persist?

Is there any way of making the end position &#39;sticky&#39; without having to resort to Javascript to tag a classname or style onto the element at the end of the animation to fix its altered properties?  I know that [transitions persist][1], but for the animation I have in question (the example is for demonstration purposes only) transitions don&#39;t give the level of control needed.  Without this, it seems that complex animations are only of use for circular processes where the element ends up back in its original state.


  [1]: https://stackoverflow.com/questions/2017851/webkit-translatex-animation-is-rolling-back-to-initial-position

Webkit CSS Animation issue - persisting the end state of the animation?

I&#39;m making a simple landing page driven by CSS3. To make it look awesome there&#39;s an `&lt;a&gt;` plopping up:

    @keyframes splash {
    	from {
    		opacity: 0;
    		transform: scale(0, 0);
    	}
    	50% {
    		opacity: 1;
    		transform: scale(1.1, 1.1);
    	}
    	to {
    		transform: scale(1, 1);
    	}
    }
And to make it even more awesome I added a hover animation:

    @keyframes hover {
    	from {
    		transform: scale(1, 1);
    	}
    	to {
    		transform: scale(1.1, 1.1);
    	}
    }
But there comes the problem! I assigned the animations like this:

    a {
    	/* Some basic styling here */
    	
    	animation: splash 1s normal forwards ease-in-out;
    }
    a:hover {
    	animation: hover 1s infinite alternate ease-in-out;
    }
Everything works just fine: The `&lt;a&gt;` splashes into the users face and has a nice vibration when he hovers it. Bit as soon as the user blurs the `&lt;a&gt;` the smooth stuff ends abruptly and the `&lt;a&gt;` repeats the `splash`-animation. (Which is logical to me, but I don&#39;t want it to)
Is there some way to solve this problem without some JavaScript Class Jiggery Pokery?

Run CSS3 animation only once (at page loading)

I am trying to get a wipe up animation to make a circle look like **it&#39;s filling with water**. I&#39;ve run into two errors, and haven&#39;t been able to even tackle the 3rd one:

 1. It fills up the wrong way
 2. &lt;strike&gt;It resets to empty (black) after it has filled&lt;/strike&gt; *
 3. For now, I am using the `&lt;img&gt;` tags, but I would like to move this effect to `body { background-image: }` and need some direction on how to do this.

[What I have tried so far:][1] 


&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    #banner {
      width: 300px;
      height: 300px;
      position: relative;
    }
    #banner div {
      position: absolute;
    }
    #banner div:nth-child(2) {
      -webkit-animation: wipe 6s;
      -webkit-animation-delay: 0s;
      -webkit-animation-direction: up;
      -webkit-mask-size: 300px 3000px;
      -webkit-mask-position: 300px 300px;
      -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.25, rgba(0, 0, 0, 1)), color-stop(0.27, rgba(0, 0, 0, 0)), color-stop(0.80, rgba(0, 0, 0, 0)), color-stop(1.00, rgba(0, 0, 0, 0)));
    }
    @-webkit-keyframes wipe {
      0% {
        -webkit-mask-position: 0 0;
      }
      100% {
        -webkit-mask-position: 300px 300px;
      }
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;banner&quot;&gt;
      &lt;div&gt;
        &lt;img src=&quot;http://i.imgur.com/vklf6kK.png&quot; /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src=&quot;http://i.imgur.com/uszeRpk.png&quot; /&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

---

Giving it a default mask position as [@anpsmn][2] suggested, doesn&#39;t reset it to black anymore.

  [1]: http://jsfiddle.net/um0rnL56/1/
  [2]: https://stackoverflow.com/users/473016/anpsmn

Filling water animation

I have a div in which I animate the content:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    #container {
      position: relative;
      width: 100px;
      height: 100px;
      border-style: inset;
    }
    #content {
      visibility: hidden;
      -webkit-animation: animDown 1s ease;
      position: absolute;
      top: 100px;
      width: 100%;
      height: 100%;
      background-color: lightgreen;
    }
    #container:hover #content {
      -webkit-animation: animUp 1s ease;
      animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
    }
    @-webkit-keyframes animUp {
      0% {
        -webkit-transform: translateY(0);
        visibility: hidden;
        opacity: 0;
      }
      100% {
        -webkit-transform: translateY(-100%);
        visibility: visible;
        opacity: 1;
      }
    }
    @-webkit-keyframes animDown {
      0% {
        -webkit-transform: translateY(-100%);
        visibility: visible;
        opacity: 1;
      }
      100% {
        -webkit-transform: translateY(0);
        visibility: hidden;
        opacity: 0;
      }
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;container&quot;&gt;
      &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;



&lt;!-- end snippet --&gt;

On hover, the content slides into the container div.
When I refresh the page and the page loads, the `#content`&#39;s animDown animation will run, and I&#39;d prefer it to run only after a hover event.

Is there a way to do this pure CSS, or I have to figure something out in JS?

http://jsfiddle.net/d0yhve8y/

How to prevent a CSS keyframe animation from running on page load?

When I remove an item from a flexbox, the remaining items &quot;snap&quot; into their new positions immediately rather than animating.

Conceptually, since the items are changing their positions, I would expect the transitions to apply.

I have set the transition property on all involved elements (the flexbox and the children)

Is there any way to animate edits (adds &amp; deletes) to a flexbox? This is actually a showstopper for me and the one missing piece with flexbox.

Is it possible to animate Flexbox inserts &amp; removes?

I have an element that spins when you hover over it indefinitely. When you hover out, the animation stops. Simple:

    @-webkit-keyframes rotate {
        from {
            -webkit-transform: rotate(0deg);
        }
        to { 
            -webkit-transform: rotate(360deg);
        }
    }

    .elem:hover {
        -webkit-animation-name: rotate; 
        -webkit-animation-duration: 1.5s; 
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
    }

When you hover out, though, the animation abruptly ceases, reverting to 0 degrees. I&#39;d like to animate back to that position, but I&#39;m having some trouble working out the syntax.

Any input would be awesome!

Continuous CSS rotation animation on hover, animated back to 0deg on hover out

I want to create an expand/collapse animation that&#39;s powered only by classnames (javascript is used to toggle the classnames).

I&#39;m giving one class `max-height: 4em; overflow: hidden;` 

and the other `max-height: 255em;` (I also tried the value `none`, which didn&#39;t animate at all)

this to animate: `transition: max-height 0.50s ease-in-out;`

I used CSS transitions to switch between them, but the browser seems to be animating all those extra `em`&#39;s, so it creates a delay in the collapse effect. 

Is there a way of doing it (in the same spirit - with css classnames) that doesn&#39;t have that side-effect (I can put a lower pixel count, but that obviously has drawbacks, since it might cut off legit text - that&#39;s the reason for the big value, so it doesn&#39;t cut off legit long text, only ridiculously long ones)

See the jsFiddle - http://jsfiddle.net/wCzHV/1/ (click on the text container)

Animating max-height with CSS transitions

Using [keyframes][1], it is possible to animate an element as soon as it is inserted into the DOM. Here&#39;s some sample CSS:

&lt;!-- language: lang-css --&gt;

    @-moz-keyframes fadeIn {
        from {opacity:0;}
        to {opacity:1;}
    }
    
    @-webkit-keyframes fadeIn {
        from {opacity:0;}
        to {opacity:1;}
    }
    
    @keyframes fadeIn {
        from {opacity:0;}
        to {opacity:1;}
    }

    #box {
        -webkit-animation: fadeIn 500ms;
        -moz-animation: fadeIn 500ms;
        animation: fadeIn 500ms;
    }

Is there some similar functionality available to apply an animation (via CSS, no JavaScript) to an element right before it is removed from the DOM? Below is a jsFiddle I made to play around with this idea; feel free to fork it if you know of a solution.

jsFiddle - http://jsfiddle.net/skoshy/dLdFZ/


  [1]: http://www.w3schools.com/cssref/css3_pr_keyframes.asp

CSS3 - Transition on DOM Removal

I&#39;m creating a marquee effect with CSS3 animation.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    #caption {
        position: fixed;
        bottom: 0;
        left: 0;
        font-size: 20px;
        line-height: 30px;
        height:30px;
        width: 100%;
        white-space: nowrap;
        -moz-animation:  caption 50s linear 0s infinite;
        -webkit-animation:  caption 50s linear 0s infinite;
    }
    @-moz-keyframes caption { 
        0% { margin-left:120%; } 100% { margin-left:-4200px; }  
    }
    @-webkit-keyframes caption { 
        0% { margin-left:120%; } 100% { margin-left:-4200px; }  
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;caption&quot;&gt;
        The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog.
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

Now I can get the basic marquee effect, but the code is too specific for this demo.

Is there a way to avoid using specific values like `margin-left:-4200px;`, so that it can adapt text in any length?

Here is a similar demo: http://jsfiddle.net/jonathansampson/XxUXD/ that uses `text-indent` but still with specific values.

How can I create a marquee effect?

I have a bar chart that animates with CSS3 and the animation currently activates as the page loads.

The problem I have is that the given bar chart is placed off screen due to lots of content before it so by the time a user scrolls down to it, the animation has already finished.

I was looking for ways either through CSS3 or jQuery to only activate the CSS3 animation on the bar chart when the viewer sees the chart.

    &lt;div&gt;lots of content here, it fills the height of the screen and then some&lt;/div&gt;
    &lt;div&gt;animating bar chat here&lt;/div&gt;

If you scroll down really fast right after page load, you can see it animating.

Here is a [jsfiddle][1] of my code. Also, I dont know if this matters, but I have several instances of this bar chart on the page.

I have come across a jQuery plug-in called waypoint but I had absolutely no luck getting it to work. 

If someone could point me in the right direction, it would be really helpful.

Thanks!




  [1]: http://jsfiddle.net/gBJwr/


Activate CSS3 animation when the content scrolls into view

I am trying to implement some animation onLoad **without Javascript**. JS is easy, CSS is ... not.

I have a `div` which should be on `display: none;` and should be `display: block;` after 3 secondes. Lots of resources told me animate does not work with `display`, but should with `visibility` (which I use often in my transition).

Right know I have this terrible javascript function :

    &lt;script type=&quot;text/javascript&quot;&gt;
		$(document).ready(function(){
			$(&quot;.js_only&quot;).hide();
			setTimeout(function () {
				$(&quot;.js_only&quot;).show();
			}, 3000);
		});
    &lt;/script&gt;

I tried some animation in CSS but no result ... nothing seems to work.

I have few animation in my page, but just struggling with the `display: none;` on animation.


    @-moz-keyframes showEffect {
    	0% { display: none; visibility: hidden; }
    	100% { display: block; visibility: block;  }
    
    }
    @-webkit-keyframes showEffect {
    	0% { display: none; visibility: hidden; }
    	100% { display: block; visibility: block;  }
    
    }
    @keyframes showEffect {
    	0% { display: none; visibility: hidden; }
    	100% { display: block; visibility: block;  }
    }

    .css_only {
	    -moz-animation-name: showEffect;
	    -moz-animation-iteration-count: 1;
	    -moz-animation-timing-function: ease-in;
	    -moz-animation-duration: 2.3s;

	    -webkit-animation-name: showEffect;
	    -webkit-animation-iteration-count: 1;
	    -webkit-animation-timing-function: ease-in;
	    -webkit-animation-duration: 2.3s;

	    animation-name: showEffect;
	    animation-iteration-count: 1;
	    animation-timing-function: ease-in;
	    animation-duration: 2.3s;
    }

It is important as hidden, this element does not take space at all. [I created a JSFiddle][1] to make quite tests.

My main concerne is SEO ... I don&#39;t think the JS option is really nice for that which is why I would like a pure CSS alternative. Also interested to test those animations and see where are those limits (Am I seeing one right now ?). Kinda having fun on such challenge.

Thanks for reading, hope someone has an answer.


  [1]: http://jsfiddle.net/n51uvrnu/

All Css Animations Solutions on Gang of Coders

Total of 32 Css Animations Solutions