The inherit keyword can only exist alone as a value in a property declaration. It cannot be used with anything else as a value, because it’s a value in and of itself. This means it cannot be used with functions like calc() either. See CSS2.1 and css3-cascade. So to put it simply, the spec doesn’t … Read more
Please try this code: #gradient { height:300px; width:300px; border:1px solid black; font-size:30px; background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00); background-size: 200% 200%; -webkit-animation: Animation 5s ease infinite; -moz-animation: Animation 5s ease infinite; animation: Animation 5s ease infinite; } @-webkit-keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} } @-moz-keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} … Read more
You can consider animating the maximum width of a span like below. .slow { display: inline-block; vertical-align: bottom; max-width: 0.5rem; overflow: hidden; animation: slow 2s ease forwards; } @keyframes slow { from { max-width: 0.5rem; } to { max-width: 3rem; } } <span>Sl</span><span class=”slow”>oooooo</span><span>w</span>
You can adjust the timing of the @keyframes as follows: .object { animation: MoveUpDown 1s linear infinite; position: absolute; left: 0; bottom: 0; } @keyframes MoveUpDown { 0%, 100% { bottom: 0; } 50% { bottom: 100px; } } <div class=”object”> hello world! </div> EDIT As pointed out in a comment below using transform is … Read more
The question is actually more javascript animation vs css animation (because angular2’s animations are based on javascript-animation). The answer is that when you can – use CSS animation. Modern browsers uses different thread for CSS animation, so the javascript-thread is not affected by the CSS animations. You can use the HTML5 Animation Speed Test to … Read more
Cog and chain animation : I totaly refactored the code (CSS and HTML), it is now : shorter (especialy the css) simpler more realistic: corrected the synchronisation issue bteween the chain and the cogs and added a missing cog on the right because your chain seemed to be floating in the air : DEMO The … Read more
Short answer Yes, you can. Replace the .fa-spin class on the icon with a new class using your own animation rule: .slow-spin { -webkit-animation: fa-spin 6s infinite linear; animation: fa-spin 6s infinite linear; } <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”/> <i class = “fa fa-cog fa-5x slow-spin”></i> Longer answer If you look at the Font Awesome CSS file, … Read more
The simplest method to trigger CSS animations is by adding or removing a class – how to do this with pure Javascript you can read here: How do I add a class to a given element? If you DO use jQuery (which should really be easy to learn in basic usage) you do it simply … Read more
Capture scroll events This requires using JavaScript or jQuery to capture scroll events, checking each time a scroll event fires to see if the element is in view. Once the element is in view, start the animation. In the code below, this is done by adding a “start” class to the element, that triggers the … Read more
You are correct in thinking that display is not animatable. It won’t work, and you shouldn’t bother including it in keyframe animations. visibility is technically animatable, but in a round about way. You need to hold the property for as long as needed, then snap to the new value. visibility doesn’t tween between keyframes, it … Read more