css-animations.js
A library to work with CSS3 keyframe animations from javascript
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*!
Source: (StackOverflow)
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 "one direction", 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 "raise" from this fade back again to opacity: 1.0. Is that possible?
Source: (StackOverflow)
I'm working on a css animation that uses 'cogs and chains', but am unable to create a 'smooth' border rotation sequence.
You can see in this fiddle How (currently) I'm using a pseudo element to generate a 'rotation' effect. This is done by 'switching' between a dashed white and dashed gold colored border, making it seem like the 'border is rotating'.
What I have
#one{
-webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */
-moz-animation: rotateClockwiseAnimation 5s linear infinite; /* Fx 5+ */
-o-animation: rotateClockwiseAnimation 5s linear infinite; /* Opera 12+ */
animation: rotateClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */
}
#two{
-webkit-animation: rotateAntiClockwiseAnimation 5s linear infinite; /* Safari 4+ */
-moz-animation: rotateAntiClockwiseAnimation 5s linear infinite; /* Fx 5+ */
-o-animation: rotateAntiClockwiseAnimation 5s linear infinite; /* Opera 12+ */
animation: rotateAntiClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */
position:absolute;
top:30px;
left:42px;
width:80px;
}
@-webkit-keyframes rotateClockwiseAnimation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-moz-keyframes rotateClockwiseAnimation{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-o-keyframes rotateClockwiseAnimation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes rotateClockwiseAnimation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-webkit-keyframes rotateAntiClockwiseAnimation {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
@-moz-keyframes rotateAntiClockwiseAnimation {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
@-o-keyframes rotateAntiClockwiseAnimation {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
@keyframes rotateAntiClockwiseAnimation {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
/******************************************************************************/
.chain{
height:70px;
width:80%;
border:5px dashed gold;
border-radius:30px;
position:absolute;
top:30px;
left:40px;
-webkit-animation: switchGoldBlackBorder 0.8s infinite; /* Safari 4+ */
-moz-animation: switchGoldBlackBorder 0.8s infinite; /* Fx 5+ */
-o-animation: switchGoldBlackBorder 0.8s infinite; /* Opera 12+ */
animation: switchGoldBlackBorder 0.8s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes switchBlackGoldBorder {
0% { border: 5px dashed transparent; }
49% { border: 5px dashed transparent; }
50% { border: 5px dashed gold; }
100% { border: 5px dashed gold; }
}
@-moz-keyframes switchBlackGoldBorder{
0% { border: 5px dashed transparent; }
49% { border: 5px dashed transparent; }
50% { border: 5px dashed gold; }
100% { border: 5px dashed gold; }
}
@-o-keyframes switchBlackGoldBorder {
0% { border: 5px dashed transparent; }
49% { border: 5px dashed transparent; }
50% { border: 5px dashed gold; }
100% { border: 5px dashed gold; }
}
@keyframes switchBlackGoldBorder {
0% { border: 5px dashed transparent; }
49% { border: 5px dashed transparent; }
50% { border: 5px dashed gold; }
100% { border: 5px dashed gold; }
}
.chain:after{
content:"";
position:absolute;
height:70px;
border-radius:30px;
width:100%;
top:-5px;
left:-5px;
border:5px solid gold;
z-index:-1;
-webkit-animation: switchBlackGoldBorder 0.8s infinite; /* Safari 4+ */
-moz-animation: switchBlackGoldBorder 0.8s infinite; /* Fx 5+ */
-o-animation: switchBlackGoldBorder 0.8s infinite; /* Opera 12+ */
animation: switchBlackGoldBorder 0.8s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes switchGoldBlackBorder {
0% { border: 5px solid gold; }
49% { border: 5px solid gold; }
50% { border: 5px solid white; }
100% { border: 5px solid white; }
}
@-moz-keyframes switchGoldBlackBorder{
0% { border: 5px solid gold; }
49% { border: 5px solid gold; }
50% { border: 5px solid white; }
100% { border: 5px solid white; }
}
@-o-keyframes switchGoldBlackBorder {
0% { border: 5px solid gold; }
49% { border: 5px solid gold; }
50% { border: 5px solid white; }
100% { border: 5px solid white; }
}
@keyframes switchGoldBlackBorder {
0% { border: 5px solid gold; }
49% { border: 5px solid gold; }
50% { border: 5px solid white; }
100% { border: 5px solid white; }
}
<svg id="one" style="width:50px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
<defs>
<circle id="c" cx="50" cy="50" r="30" stroke="#808080" fill="none" stroke-width="25"/>
<path id="d" stroke="#808080" stroke-width="16" d="M50 0, V15 M50 100, V85 M0 50, H15 M100 50, H85"/>
</defs>
<use xlink:rel='nofollow' href="#c"/>
<use xlink:rel='nofollow' href="#d"/>
<use xlink:rel='nofollow' href="#d" transform="rotate(45, 50, 50)"/>
</svg>
<svg id="two" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
<use xlink:rel='nofollow' href="#one"/>
</svg>
<div class="chain"></div>
So, the lower section of the snippet, you can see how I've generated the 'rotating chain effect' through using keyframes.
What I would like
My overall wish would be to generate something like:
Think of a cross section of a conveyor belt, and how the 'gears at the end drive the belt'. I'm trying to reproduce that. (i.e. the dashed border's gold bits should be within the troughs of the gear, and 'be pulled' by it)
#one{
-webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */
-moz-animation: rotateClockwiseAnimation 5s linear infinite; /* Fx 5+ */
-o-animation: rotateClockwiseAnimation 5s linear infinite; /* Opera 12+ */
animation: rotateClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */
border:5px dashed gold;
border-radius:50%;
}
@-webkit-keyframes rotateClockwiseAnimation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-moz-keyframes rotateClockwiseAnimation{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-o-keyframes rotateClockwiseAnimation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes rotateClockwiseAnimation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<svg id="one" style="width:50px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
<defs>
<circle id="c" cx="50" cy="50" r="30" stroke="#808080" fill="none" stroke-width="25"/>
<path id="d" stroke="#808080" stroke-width="16" d="M50 0, V15 M50 100, V85 M0 50, H15 M100 50, H85"/>
</defs>
<use xlink:rel='nofollow' href="#c"/>
<use xlink:rel='nofollow' href="#d"/>
<use xlink:rel='nofollow' href="#d" transform="rotate(45, 50, 50)"/>
</svg>
but with the gold dashes to fit within the gear's troughs, as well as being 80% width of the screen (if that makes sense).
In the end, I would like to generate something like this image portrays:
See how i want the chain to 'rotate'?
My Current Issues
- Since the animation is 'hacked' via the use of a pseudo element, I've found it quite hard to actually sync the rotation of this 'chain'.
- I'm still learning keyframe animation, so I'm sure that isn't the best method for this
- Again, svg is a new concept for me, so bear with my reluctance to use it (hence why I'm using css for the 'chain')
- In the end, I want to 'make it look like' the gear is turning the chain, but right now they look like completely (and badly done) separate element animations
Source: (StackOverflow)
I have a div with some text spinning. How do I get the text depth to give a better 3d effect? To clarify, at 90deg the text becomes 1px thick because we can only see it from the side - how do I make it, eg, 10px thick? Also, the appropriate amount of depth should be shown - i.e. at 0deg we don't see the depth; at 45deg we see 5px of depth; at 90deg we see the full 10px depth; etc.
I am after a CSS only solution.
#spinner {
animation-name: spinner;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 3s;
transform-style: preserve-3d;
text-align:center;
}
@keyframes spinner {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-360deg);
}
}
<p id="spinner">Stop, I'm getting dizzy!</p>
Source: (StackOverflow)
I have encountered a few sites, now, that take advantage of CSS3 keyframe-style animation, and decided to test it on my own sites. However, this leads me to a conundrum: Usually before I commit a CSS file to the site, I'll use the browser's inspector (Ctrl+Shift+I on Chrome, Opera, and FF; F12 in IE) to tweack and change the CSS locally to see what I like best. However, it appears there's no way to change the keyframes of a CSS3 animation with the browser inspector! This is an extreme hinderance to me, as it forces me to commit a CSS file every time I want to change any nuance of the animation, which also comes with up to a 15-minute delay from the server. Is there any way I can locally change CSS3 animation keyframes with the browser inspector?
Source: (StackOverflow)
CSS3 transitions, transforms and animations are wonderful. They are even more now more browsers do support them.
Still there's one thing I keep asking myself: Why isn't the spec definining that CSS3 transitions and animations should handle height:auto?
It doesn't make any sense when we're moving away from fixed layouts with things like the CSS3 flexible box model and media queries.
It doesn't make any sense to use JavaScript just to set a CSS transition with a fixed height.
Now comes my question:
Will the W3C ever specify that height:auto should be supported for CSS3 transitions and animations or can we request them to specify this?
Source: (StackOverflow)
How can I tell (for testing purposes) if Hardware Acceleration has been enabled for a CSS animation?
I have the following code which essentially enlarges an element and makes it fullscreen (without using the HTML5 fullscreen API). It runs like a stuttering asthmatic tortoise on most mobiles when using a jQuery animation so I have used CSS3 instead.
Here is the jsFiddle example:
$("#makeFullscreen").on("click", function() {
var map = $("#map"),
mapTop = map.offset().top,
mapLeft = map.offset().left;
$("#map").css({
"position": "fixed",
"top": mapTop,
"left": mapLeft,
"width": map.outerWidth(true),
"height": map.outerHeight(true)
});
setTimeout(function(){map.addClass("fullscreen")},1);
return false;
});
.mapContainer {
width: 150px;
height: 200px;
position: relative;
margin: 0 auto;
}
.map {
background: #00f;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}
.fullscreen {
-webkit-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
-moz-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
-ms-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
-o-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
#makeFullscreen {
margin-top: 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mapContainer">
<div id="map" class="map">
<button id="makeFullscreen">Make Fullscreen</button>
</div>
</div>
This adds a class and the element transitions from one state to the next using a CSS transition. This is faster than jQuery but is still stuttery on iOS and android.
But I read here that you can force the transition to be accelerated using the GPU by specifying a 3d transform that essentially does nothing, like this:
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
However, after adding that to my CSS I see no visual improvement.
The Question Then...
Is there a way to see if hardware acceleration has been enabled through dev tools in any browser? I don't need to detect this with script, I just want to know for testing purposes.
Source: (StackOverflow)
I've recently discovered how to "properly" use CSS animations (previously I dismissed them as not being able to make complex sequences like you could in JavaScript). So now I'm learning about them.
For this effect, I'm trying to have a gradient "flare" 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 "resolved" 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 "delay" 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 "solution", 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?
Source: (StackOverflow)
I have been trying to get these css3 animations to work in IE9 for a few hours today and I am stumped!
I tried implementing a few JavaScript fallbacks but my knowledge is very limited so they failed. I am unsure if it was failing due to my user errors or code errors.
Here is a jsFiddle of my code so far, I have replaced the background images with colours. Basically the green and black squares rotate in Firefox and Webkit browsers.
http://jsfiddle.net/fJxsV/
I want to have it running on IE9 also.
If you can please help me with this I would be very grateful!
Source: (StackOverflow)
I try to set up this LESS mixin for CSS animation keyframes:
.keyframes(@name, @from, @to) {;
@-webkit-keyframes "@name" {
from {
@from;
}
to {
@to;
}
}
}
but there is some problem with name pharse, is there any option to do this corectly?
Source: (StackOverflow)
Using keyframes, it is possible to animate an element as soon as it is inserted into the DOM. Here's some sample CSS:
@-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/
Source: (StackOverflow)
I've got a frustrating bug in Safari around CSS animation-delay.
This animation works beautifully on Desktop in Chrome, Firefox, IE11, IE10, but I get mixed results in Safari. The pieces of the bag should all display after an equal amount of pause (controlled by the animation-delay).
Desktop Safari will sometimes display correctly, and other times will slow down the first part of the bag transition and speed up the end, or it will clump a few transitions together. In mobile Safari and mobile Chrome on an iPhone 6, sometimes it will just ignore the animation-delay all together and transition the whole bag at once. I'm having a hard time troubleshooting when the performance isn't consistent. I added a little JavaScript to make sure that all the assets were loaded on the page before starting the animation, but that didn't seem to help. Anyone have any idea what's happening here?
http://codepen.io/brendamarienyc/pen/qdoOZM
@-webkit-keyframes bag-1 {
0%,
19.9% {
opacity: 0;
}
20%,
100% {
opacity: 1;
}
}
@keyframes bag-1 {
0%,
19.9% {
opacity: 0;
}
20%,
100% {
opacity: 1;
}
}
.satchel-1 {
-webkit-animation-name: bag-1;
animation-name: bag-1;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-1 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
@-webkit-keyframes bag-2 {
0%,
39.9% {
opacity: 0;
}
40%,
100% {
opacity: 1;
}
}
@keyframes bag-2 {
0%,
39.9% {
opacity: 0;
}
40%,
100% {
opacity: 1;
}
}
.satchel-2 {
-webkit-animation-name: bag-2;
animation-name: bag-2;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-2 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
@-webkit-keyframes bag-3 {
0%,
59.9% {
opacity: 0;
}
60%,
100% {
opacity: 1;
}
}
@keyframes bag-3 {
0%,
59.9% {
opacity: 0;
}
60%,
100% {
opacity: 1;
}
}
.satchel-3 {
-webkit-animation-name: bag-3;
animation-name: bag-3;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-3 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
@-webkit-keyframes bag-4 {
0%,
79.9% {
opacity: 0;
}
80%,
100% {
opacity: 1;
}
}
@keyframes bag-4 {
0%,
79.9% {
opacity: 0;
}
80%,
100% {
opacity: 1;
}
}
.satchel-4 {
-webkit-animation-name: bag-4;
animation-name: bag-4;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-4 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
@-webkit-keyframes bag-5 {
0%,
99.9% {
opacity: 0;
}
100%,
100% {
opacity: 1;
}
}
@keyframes bag-5 {
0%,
99.9% {
opacity: 0;
}
100%,
100% {
opacity: 1;
}
}
.satchel-5 {
-webkit-animation-name: bag-5;
animation-name: bag-5;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-5 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
.satchel-container {
height: 450px;
width: 472px;
margin: 2em auto;
position: relative;
}
@media (max-width: 500px) {
.satchel-container {
height: 300px;
width: 315px;
}
}
.satchel-shadow {
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 94px;
width: 472px;
}
@media (max-width: 500px) {
.satchel-shadow {
height: 63px;
width: 315px;
}
}
.satchel-body {
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 295px;
width: 472px;
-webkit-animation-delay: 0;
animation-delay: 0;
}
@media (max-width: 500px) {
.satchel-body {
height: 197px;
width: 315px;
}
}
.satchel-gusset {
position: absolute;
bottom: 30px;
left: 14px;
height: 221px;
width: 441px;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
}
@media (max-width: 500px) {
.satchel-gusset {
position: absolute;
bottom: 20px;
left: 10px;
height: 149px;
width: 294px;
}
}
.satchel-piping {
position: absolute;
bottom: 22px;
left: 21px;
height: 268px;
width: 429px;
-webkit-animation-delay: 900ms;
animation-delay: 900ms;
}
@media (max-width: 500px) {
.satchel-piping {
position: absolute;
bottom: 15px;
left: 14px;
height: 179px;
width: 286px;
}
}
.satchel-collar {
position: absolute;
bottom: 15px;
left: 30px;
height: 63px;
width: 412px;
-webkit-animation-delay: 900ms;
animation-delay: 900ms;
}
@media (max-width: 500px) {
.satchel-collar {
position: absolute;
bottom: 7px;
left: 20px;
height: 42px;
width: 275px;
}
}
.satchel-strap {
position: absolute;
bottom: 70px;
left: 139px;
height: 370px;
width: 195px;
-webkit-animation-delay: 1350ms;
animation-delay: 1350ms;
}
@media (max-width: 500px) {
.satchel-strap {
position: absolute;
bottom: 47px;
left: 92px;
height: 247px;
width: 130px;
}
}
.satchel-narrow {
position: absolute;
bottom: 68px;
left: 13px;
height: 232px;
width: 377px;
-webkit-animation-delay: 1800ms;
animation-delay: 1800ms;
}
@media (max-width: 500px) {
.satchel-narrow {
position: absolute;
bottom: 46px;
left: 8px;
height: 155px;
width: 251px;
}
}
Source: (StackOverflow)
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'd like to animate back to that position, but I'm having some trouble working out the syntax.
Any input would be awesome!
Source: (StackOverflow)
So, I understand how to perform both CSS3 transitions and animations. What is not clear, and I'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'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:
<div class="sf-container">
<div class="sf-page in" id="content-container">
<button type="button">Click Me</button>
</div>
<div class="sf-drawer">
</div>
</div>
And, this accompanying jQuery script:
$("#content-container").click(function(){
$("#content-container").toggleClass("out");
// below is only required for css animation route
$("#content-container").toggleClass("in");
});
What I'd like to understand is what are the pros and cons of these approaches.
- One obvious difference is that animating is taking a whole lot more code.
- Animation gives better flexibility. I can have different animation for sliding out and in
- Is there something that can be said about performance. Do both take advantage of h/w acceleration?
- Which is more modern and the way going forward
- Anything else you could add?
Source: (StackOverflow)
I'm using css animations on my page and Safari seems to change unrelated font weights elsewhere on the page when animations are running. Any idea why this happens? All other browsers work fine, include webkit ones like Chrome.
I've detailed the bug in a video here - http://www.screenr.com/gZN8
The site is also here - http://airport-r7.appspot.com/ but it might keep changing rapidly.
I'm using compass (@transition-property, @transition-duration) on the arrow icons. No transitions applied on the heading that's flashing. On a Mac - so it might be the hardware acceleration, but I'm still trying to figure it out.
Source: (StackOverflow)