Is it possible to create an IE10 hack for the CSS animation property?
I was using this:
height: 70px\9;
However this doesn't work for animation. The following will stop animations working for all browsers:
animation: none\9;
I want to do this in my existing stylesheet, without using JavaScript or conditional stylesheets.
This has got to be one of the most peculiar edge cases in CSS I've seen yet. I have to say, hats off to you for finding — well, stumbling across — this.
The reason why the \9 hack fails for the animation property is because, unlike with most other properties, an identifier that ends in \9 is actually a valid value for animation-name, which accepts an identifier. In this case, the \9 represents a hexadecimal escape sequence; what browsers end up doing is accepting the declaration and looking for a #keyframes rule named none\9, or more precisely, an identifier consisting of the word "none" directly followed by U+0009 CHARACTER TABULATION, better known as the tab character "\t", normally considered whitespace in CSS.1 The reference to your original animation is lost, and so the element no longer animates.
1 This is technically what happens whenever the \9 hack is used; the hack exploits the fact that this usually results in a parse error on browsers other than IE. Not so for animation-name, as it turns out.
How to solve your problem of stopping the animation only on IE10 is a little tricky. You can use the \9 hack, but with another property — animation-play-state, and furthermore this requires that you want your element to look the same and have the same styles as the animation's starting point in IE10, because what this effectively does is freeze it at the animation's starting point:
.element {
width: 50px;
height: 50px;
background-color: yellow;
animation: myanim 1s infinite alternate;
/* Pause the animation at 0% in IE10 */
animation-play-state: paused\9;
}
#keyframes myanim {
0% { background-color: yellow; }
100% { background-color: red; }
}
<div class=element></div>
Unfortunately I don't have a computer running IE10 to test this with, so if you find that the animation is being paused on IE11 as well you will need to add another CSS rule with the following selector hack from Jeff Clayton:
.element {
width: 50px;
height: 50px;
background-color: yellow;
animation: myanim 1s infinite alternate;
/* Pause the animation at 0% in IE10 */
animation-play-state: paused\9;
}
_:-ms-fullscreen, :root .element {
/* Allow the animation to run in IE11 */
animation-play-state: running;
}
#keyframes myanim {
0% { background-color: yellow; }
100% { background-color: red; }
}
<div class=element></div>
If you don't want to use the \9 hack you can replace
animation-play-state: paused\9;
with
-ms-animation-play-state: paused;
but you'll definitely require the IE11 hack. Either way this still relies on your static CSS rule having the same styles as the starting point.
Related
I want to hide an HTML element when the page loads, then fade it in with a CSS transition. My plan is to set the opacity to 0, and then use a CSS animation to transform it to 1.
But I am worried that the content will remain hidden in old browsers that can't handle CSS transitions.
Is there a safer way to hide the content? Or to exclude this code from browsers that can't handle it?
As always, your problem is with older versions of IE.
http://caniuse.com/#feat=css-animation
I'm a big believer in progressive enhancement amd handling things CSS only.
Using Javascript could provide fallback for older browser or using libraries like Modernizr but I hate these kind of solutions and they come with there own problems. What if the visitor has JS disabled?
Luckily we can safely let older browser ignore the fade in animation. Just set opacity on 1 for the default div you want to fade in and start the keyframe animation at opacity set to 0.
div {
height: 300px;
width: 300px;
background-color: red;
opacity: 1;
animation: fadeIn 7s ease infinite;
}
#keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
https://jsfiddle.net/3rzL0xz8/
I'm trying to combine several parts of animation together by clicking a button. Here's an example:
.element {
background-color: black;
display: block;
width: 160px;
height: 160px;
border-radius: 80%;
}
.one {
animation: one 1.5s ease 1 forwards;
}
.two {
animation: two 1s forwards;
}
#keyframes one {
from {
transform: scale(0.25);
opacity: 0；
}
25% {
opacity: 0.5;
}
to {
transform: scale(1);
opacity: 0.5;
}
}
#keyframes two {
from {
opacity: 0.5；
}
to {
opacity: 0;
}
}
I'm trying to combine these two animation: one and two. My way of doing this was to use JS: classList.add('.two') when I clicked the button. But the problem was: at the moment I added the class, the element changed to its default opacity which was 1.
To solve this, I added a new class contained styles which were actually clones of final styles of the first animation. And after the second part was finished, I had to remove the class list to prepared for the first animation to be played.
So my question is, is there a better way of doing this?
Here is a CodePen Demo
I just realised a problem with this: If I start the second animation before the first one was finished, there would be a discontinuity (the circle would just turns to a larger one all of a sudden).
The demo can be found from the above link, thanks!
Can I combine these two animations?
I assume by combine you mean producing forward (on click of add animation) and reverse (on click of remove animation) animations using the same keyframe rules. It's possible to achieve but for that both the forward and reverse animations should be exactly the same (but in opposite directions). When it is same, we can use animation-direction: reverse to achieve reverse effect with same keyframes.
Here, the forward animation has a transform change whereas the reverse doesn't and hence adding animation-direction: reverse would not produce the same effect as the original snippet. Moreover, coding it is not as easy as just adding a property also, a lot of work is needed like mentioned here.
What is the reason for the other two issues?
The reason for both the issues (that is, the element getting opacity: 1 immediately when the remove button is clicked and element getting full size when remove button is clicked while forward animation is still happening) are the same. When you remove the animation on an element (by removing the class) it immediately snaps to the size specified outside of the animation.
For the first case, the size is the one that is mentioned under .element (as .one is removed) and its opacity is default 1 because there is no opacity setting in it. For the second case, when the .one is removed and .two is added, the animation is removed and so the element's size is as specified in .element and the opacity is as specified in .two (because that is later in CSS file).
So what else is the alternate?
When both forward and reverse effects are required and the animation doesn't have any intermediate states (that is, there is only a start state and an end state) then it is better to use transitions instead of animations. The reason is because transitions automatically produce the reverse effect on removal of the class (unlike animations where the reverse animation needs to be written as a separate keyframe and added to the element).
Below is a sample snippet showing how you can achieve a similar effect using just one class without the need for writing keyframes.
var theBut = document.getElementById('butt');
var theBut2 = document.getElementById('butt2');
theBut.addEventListener('click', function a() {
document.querySelector('.element').classList.add('one');
});
theBut2.addEventListener('click', function b() {
document.querySelector('.element').classList.remove('one');
});
.element {
background-color: #d91e57;
display: block;
width: 160px;
height: 160px;
border-radius: 90%;
transform: scale(0.25);
opacity: 0;
transition: opacity 2s, transform .1s 2s;
}
.one {
transform: scale(1);
opacity: 0.5;
transition: all 2s;
}
<div class="element">
</div>
<button id="butt">add animation</button>
<button id='butt2'>remove animation</button>
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?
It looks like you've got a handle on how to do them, just not when to do them.
A transition is an animation, just one that is performed between two distinct states - i.e. a start state and an end state. Like a drawer menu, the start state could be open and the end state could be closed, or vice versa.
If you want to perform something that does not specifically involve a start state and an end state, or you need more fine-grained control over the keyframes in a transition, then you've got to use an animation.
I'll let the definitions speak for themselves (according to Merriam-Webster):
Transition: A movement, development, or evolution from one form, stage, or style to another
Animation: Endowed with life or the qualities of life; full of movement
The names appropriately fit their purposes in CSS
So, the example you gave should use transitions because it is only a change from one state to another
A shorter answer, straight on point:
Transition:
Needs a triggering element (:hover, :focus etc.)
Only 2 animation states (start and end)
Used for simpler animations (buttons, dropdown menus and so on)
Easier to create but not so many animation/effect possibilities
Animation #keyframes:
It can be used for endless animations
Can set more than 2 states
No boundaries
Both use CPU acceleration for a much smoother effect.
Animation takes a lot more code unless you're using the same transition over and over, in which case an animation would be better.
You can have different effects for sliding in and out without an animation. Just have a different transition on both the original rule and the modified rule:
.two-transitions {
transition: all 50ms linear;
}
.two-transitions:hover {
transition: all 800ms ease-out;
}
Animations are just abstractions of transitions, so if the transition is hardware accelerated, the animation will be. It makes no difference.
Both are very modern.
My rule of thumb is if I use the same transition three times, it should probably be an animation. This is easier to maintain and alter in the future. But if you are only using it once, it is more typing to make the animation and maybe not worth it.
Animations are just that - a smooth behavior of set of properties. In other words it specifies what should happen to a set of element's properties. You define an animation and describe how this set of properties should behave during the animation process.
Transitions on the other side specify how a property (or properties) should perform their change. Each change. Setting a new value for certain property, be it with JavaScript or CSS, is always a transition, but by default it is not smooth. By setting transition in the css style you define different (smooth) way to perform these changes.
It can be said that transitions define a default animation that should be performed every time the specified property has changed.
Is there something that can be said about performance. Do both take
advantage of h/w acceleration?
In modern browsers, h/w acceleration occurs for the properties filter, opacity and transform. This is for both CSS Animations and CSS Transitions.
.yourClass {
transition: all 0.5s;
color: #00f;
margin: 50px;
font-size: 20px;
cursor: pointer;
}
.yourClass:hover {
color: #f00;
}
<p class="yourClass"> Hover me </p>
CSS3 Transitions brought frontend developers a significant ability to modify the appearance and behavior of an element as relative to a change in his state. CSS3 animations extends this ability and allow to modify the appearance and behavior of an element in multiple keyframes, so transitions provides us the ability to change from one state to another, while that animations can set multiple points of transition within different keyframes.
So, let's look at this transition sample where applied a transition with 2 points, start point at left: 0 and an end point at left: 500px
.container {
background: gainsboro;
border-radius: 6px;
height: 300px;
position: relative;
}
.ball {
transition: left 2s linear;
background: green;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
left: 0px;
}
.container:hover .ball{
left: 500px;
}
<div class="container">
<figure class="ball"></figure>
</div>
The above can be also created via animation like so:
#keyframes slide {
0% {
left: 0;
}
100% {
left: 500px;
}
}
.container {
background: gainsboro;
border-radius: 6px;
height: 200px;
position: relative;
}
.ball {
background: green;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.container:hover .ball {
animation: slide 2s linear;
}
<div class="container">
<figure class="ball"></figure>
</div>
And if we would like another in-between point, it would be possible to achieve only via animation, we can add another keyFrame to achieve this and this is the real power of animation over transition:
#keyframes slide {
0% {
left: 0;
}
50% {
left: 250px;
top: 100px;
}
100% {
left: 500px;
}
}
.container {
background: gainsboro;
border-radius: 6px;
height: 200px;
position: relative;
}
.ball {
background: green;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.container:hover .ball {
animation: slide 2s linear;
}
<div class="container">
<figure class="ball"></figure>
</div>
transition can go reverse from middle of the way, but animation replay the keyframes from start to end.
const transContainer = document.querySelector(".trans");
transContainer.onclick = () => {
transContainer.classList.toggle("trans-active");
}
const animContainer = document.querySelector(".anim");
animContainer.onclick = () => {
if(animContainer.classList.contains("anim-open")){
animContainer.classList.remove("anim-open");
animContainer.classList.add("anim-close");
}else{
animContainer.classList.remove("anim-close");
animContainer.classList.add("anim-open");
}
}
*{
font: 16px sans-serif;
}
p{
width: 100%;
background-color: #ff0;
}
.sq{
width: 80px;
height: 80px;
margin: 10px;
background-color: #f00;
display: flex;
justify-content: center;
align-items: center;
}
.trans{
transition: width 3s;
}
.trans-active{
width: 200px;
}
.anim-close{
animation: closingAnimation 3s forwards;
}
.anim-open{
animation: openingAnimation 3s forwards;
}
#keyframes openingAnimation {
from{width: 80px}
to{width: 200px}
}
#keyframes closingAnimation {
from{width: 200px}
to{width: 80px}
}
<p>Try click them before reaching end of movement:</p>
<div class="sq trans">Transition</div>
<div class="sq anim">Animation</div>
in addition, if you want the javascript to listen for end of transition, you'll get one event for each property that you change.
for example transition: width 0.5s, height 0.5s. the transitionend event will trigger two times, one for width and one for height.
Just a summary, thanks to this post, there are 5 main differences between CSS transitions vs CSS animations:
1/ CSS transitions:
Animate an object from one state to another, implicitly by browser
Cannot loop
Need a trigger to run (:hover, :focus)
Simple, less code, limited powerful
Easy to work in JavaScript
2/ CSS animations:
Freely switch between multiple states, with various properties and time frame
Can loop
Don’t need any kind of external trigger
More complex, more code, more flexible
Hard to work in JavaScript due to syntax for manipulating keyframes
I believe CSS3 animation vs CSS3 transition will give you the answer you want.
Basically below are some takeaways :
If performance is a concern, then choose CSS3 transition.
If state is to be maintained after each transition, then choose CSS3 transition.
If the animation needs to be repeated, choose CSS3 animation. Because it supports animation-iteration-count.
If a complicated animation is desired. Then CSS3 animation is preferred.
Don't bother yourself which is better. My give away is that, if you can solve your problem with just one or two lines of code then just do it rather than writing bunch of codes that will result to similar behavior.
Anyway, transition is like a subset of animation. It simply means transition can solve certain problems while animation on the other hand can solve all problems.
Animation enables you to have control of each stage starting from 0% all the way to 100% which is something transition cannot really do.
Animation require you writing bunch of codes while transition uses one or two lines of code to perform the same result depending on what you are working on.
Coming from the point of JavaScript, it is best to use transition. Anything that involve just two phase i.e. start and finish use transition.
Summary, if it is stressful don't use it since both can produce similar result
I have a case where I need an element to appear for a second and then disappear, and I must not use javascript for it, so I'm trying to make it work with CSS.
Here's an example:
#-webkit-keyframes slide-one-pager {
0% { left: 0; }
50% { left: 100px; }
100% { left: 0; }
}
So in this example the property will gradually transition from 0 to 100 and back to 0. However, I need to get rid of that transition, so the property stays at 0 and gets to 100 as soon as it hits 50%. It doesn't work if I say left: 0; at 49%, because there is still a transition.
Another example, slightly more different than my original question, but if I find a solution for it it will do as well:
#-webkit-keyframes slide-one-pager {
0% { display: none; }
50% { display: block; }
75% { display: block; }
100% { display: none; }
}
Here I want to show an element for a period of time. No, using opacity is not an option, because the element is still there and is still clickable, and I need access to elements below. Unfortunately the "display" property doesn't seem to accept animating. If anyone can think of a solution how to show and hide an element with an animation (without transition!) I will be extremely grateful.
Any ideas?
You can use step-start or step-end (graphs) in your animation configuration so the curve will act like a "steps" (not curvy) so there will be no visual transition between frames, thus the animation will just "jump" between frames.
Example CSS:
animation:1s move infinite step-end;
The above example will call the move keyframes (which I didn't write because it's irrelevant), and will loop on the frames endlessly with the "step" argument which was described earlier, without a transitioned curve.
#keyframes foo{
0%{ margin-left:0 }
50%{ margin-left:50% }
}
div{
width: 50px;
height: 50px;
background: black;
border-radius: 50%;
animation:1s foo infinite;
}
input:checked + div{
animation-timing-function: step-end;
}
<label>
<input type='checkbox' checked /> Disable Animation transition
<div></div>
</label>
👉 Cool demo using this technique
I searched the same thing as you actually.
You can set a greatful parameters in animation, called animation-timing-function allowing you to set perfectly and mathematicaly the animation : With bezier curve values or, if, like me, you're not that good mathematician, a parameter call "step()".
For an example, in none shorthand writing :
.hiding {
animation-name:slide-one-pager;
animation-duration:2s;
animation-timing-function:steps(1);
}
By default, the value of this parameter is set to 0, meaning no steps.
You can read more about this interesting feature here : https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function
And here a shorthand notation for your animation:
.hiding {
animation:slide-one-pager 2s steps(1);
}
For me, it works fine at least on firefox 23.0.1.
Even if I think you solved the problem since one year, maybe could help some people like me here :)
I made it using the -webkit-animation-fill-mode: forwards; property, that stops the animation at 100% without returning the element to the original state. I made up a fiddle with a working example, you can check it out here.
Although in the fiddle you can find a better example, I basically did this (Assuming absolute positioned elements):
.hiding {
-webkit-animation: slide-one-pager 2s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes slide-one-pager {
0% { left: 0; }
49% { left: 0; }
50% { left: -100px; }
100% { left: -100px; }
}
It just jumps from 0 to -100 in the middle of the transition (49% -> 50% as you 'suggested' :P), and stays there at 100%. As said, with -webkit-animation-fill-mode: forwards; the element will stay as in 100% without going back to it's original state.
I don't know if it'll work in your scenario, but I believe there'd be an easy solution if it doesn't.
You can use this:
animation: typing 1s cubic-bezier(1,-1, 0, 2) infinite;
As far as I understand, there is no such thing we can implement using css transitions, but we can not to implement using css animations, but not vice versa.
That is, any transition has a css animation equivalent.
For example, this one
.ablock:hover {
position: relative;
-moz-transition-property: background-color, color;
-moz-transition-duration: 1s;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 1s;
color: red;
background-color:pink;
}
is an equivalent of following:
.ablock:hover {
-moz-animation-duration:1s;
-moz-animation-name:transition;
-webkit-animation-duration:1s;
-webkit-animation-name:transition;
}
#-moz-keyframes transition {
to {
color: red;
background-color: pink;
}
}
#-webkit-keyframes transition {
to {
color: red;
background-color: pink;
}
}
My question is - if we a talking about browser supporting both css transitions and animations, what are use cases for choosing one or another approach?
As for transitions, I can name only one - they have more succinct syntax, we don't have to copy paste huge chucks of code for #-moz-keyframes, #-webkit-keyframes and so on.
As for control from javascript, flexibility and complexity animations are much more appropriate tool (at least, at first glance). So, what are use cases?
UPD:
OK, let me try to list interesting info found in questions.
This one is contributed by Roman Komarov. Say, we have a div and child div. While parent div is hovered, we are transitioning the child element. Once we are taking away the mouse, transition is cancelled. Duration of this cancellation is exactly the time we've already spend for transitioning. Animation is cancelled "immediately". I don't know, nevertheless, how standard are those two behaviours.
Animations can be looped (and there can be keyframes, yeeah).
Transitions can be more flexible and you can easily make transitions to different values and in different circumstances.
While you can emulate some transitions by animations (like you mentioned in your post), the transitions are just more powerful:
You just tell which properties you must animate and in which conditions (using the different selectors)
You can trigger the transition in different ways:
Changing properties in CSS for pseudo-classed :hover, :active etc. (Creating pure CSS UI)
Changing properties in different classes for different purposes.
Changing properties in inline styles: in conjunction with JS it's just more powerful than animations.
With transitions you are able to transition between any value of the defined property, which you want to be transitioned. As an example, you want to transition the color of a link, when it's hovered and active:
a {
color: #000;
transition: color .4s ease;
}
a:hover {
color: #888;
}
a:active {
color: #faa;
}
You are independent, which color you choose.
Now if you want to use the animation style, you have to explicitly set the color value for the animation states. And you are not able to easily animate between the three states: normal, hover and active. You need more complex definitions. I'll try this one with animations:
a {
color: #000;
animation-duration: 0.4s;
animation-fill-mode: forwards;
animation-name: toDefault;
}
a:hover {
animation-duration: 0.4s;
animation-fill-mode: forwards;
animation-name: toHover;
}
a:active {
animation-duration: 0.4s;
animation-fill-mode: forwards;
animation-name: toActive;
}
#keyframes toDefault {
to {
color: #000;
}
}
#keyframes toHover {
to {
color: #888;
}
}
#keyframes toActive {
to {
color: #faa;
}
}
Now this does not include the animation back to the state before. I'm not sure if you can even fetch that.
So in short: with transitions you are able to animate an undefined set of properties and values, whilst keyframe animations are used for well defined animations and/or transitions.