On a Mac, if you hold the Shift key and perform an action that involves animation, it will slow down the animation. For example, hold Shift and minimise a window. This effect is described in various places (e.g. YouTube, Apple - StackExchange, The Unofficial Apple Weblog).
It would be nice to slow down CSS animations/transitions in a similar way. Is there a way to achieve this (apart from simply tweaking the animation-duration value in the CSS)?
You could combine some javascript and CSS to accomplish the effect on a consistent basis, meaning you won't have to go into your code anymore. Heres the code I tried:
function keydown(event){
if(event.which == 16) document.body.className = "slowmotion";
}
function keyup(event){
document.body.className = "";
}
if (window.addEventListener) {
window.addEventListener('keydown', keydown, false);
window.addEventListener('keyup', keyup, false);
} else if (window.attachEvent) {
window.attachEvent('keydown', keydown);
window.attachEvent('keyup', keyup);
}
And heres the CSS:
#keyframes move {
0% {left: 0}
50% {left: 100%}
100% {left: 0}
}
#-webkit-keyframes move {
0% {left: 0}
50% {left: 100%}
100% {left: 0}
}
body > div {
position: absolute;
background: red;
width: 50px;
height: 50px;
background: red;
-webkit-animation: move 4000ms infinite;
animation: move 4000ms infinite;
}
body.slowmotion * {
-webkit-animation-duration: 8000ms !important;
animation-duration: 8000ms !important;
}
And the HTML:
<div>MOVING</div>
What we're doing here is adding a class to the body to indicate we want our duration value overwritten. It will not do it immediately (in Safari it restart the animation) [EDIT: The animation does not get restarted, but gets recalculated (i.e. it reverts to where it would have been in if the other animation had been ongoing)], but it does allow for modification that way. You can even do it for elements with different speeds by doing .slowmotion #myElementID and amending the duration there. Make sure to always include the important, as the class is only triggered when the key is pressed and HAS to overwrite anyway.
Chrome and Firefox developer tools now support slowing down of many kinds of animations.
Chrome:
In the 'Styles' tab of DevTools, look for an 'Animations' icon that opens up the Animations Inspector. More info:
Chrome DevTools Animation Inspector
New animation controls in Chrome Canary
Firefox:
See documentation on working with animations
Related
I'm trying to create a 100% width and 100vh height div which would slide from out of the screen from above to down of page. At the 70% of animation I would like to make it at the bottom then at 90% move it 30px up and on 100% make it at the bottom again so it would look like it slide from up then bounce at the bottom.
I want this happen after clicking some DOM element in a grand grandchild so basically, I'll use eventBus and my "sliding div" will be in root component (app.vue) and in the child I'll emit:
showObserved() {
eventBus.$emit('showObserved');
}
here I'm emitting my custom event and then I'm watching this event in root component and changing boolean variable:
eventBus.$on('showObserved', async() => {
this.showObserved = true;
});
eventBus.$on('hideObserved', async() => {
this.showObserved = false;
});
and basing on this boolean I'm displaying my sliding div using v-if directive:
<transition name="slide-up" mode="out-in">
<observed-offer v-if="showObserved"></observed-offer>
</transition>
and here finally I use transition vue built-in component in order to make it sliding and this are my styles which should make effect that I explained in first parahraph:
/* slide from up to down */
.slide-up-leave-active {
animation: slide-out-up .4s linear;
}
.slide-up-enter-active {
animation: slide-in-up .4s linear forwards;
}
.slide-up-in-leave-active {
animation: slide-out-up .4s linear;
}
.slide-up-leave {
opacity: 1;
transform: translateY(-100%);
}
#keyframes slide-out-up {
0% {
transform: translateY(0);
}
70% {
transform: translateY(0);
}
90% {
transform: translateY(10%);
}
100% {
transform: translateY(0);
}
}
#keyframes slide-in-up {
0% {
transform: translateY(-100%);
}
70% {
transform: translateY(0);
}
90% {
transform: translateY(10%);
}
100% {
transform: translateY(0);
}
}
and this are style's of my sliding div:
.observed {
width: 100%;
height: 100vh;
z-index: 999999999;
overflow: hidden;
background-color: white;
}
But this doesn't work behavior is that it instantly makes entire page white and slide only content of div. I'm pretty sure that I just made wrong CSS styles I tried various other styles and it didn't work. Also maybe it has also something to do with height: 100vh.
I add demo repository. In this demo sliding in is almost working but slide out doesn't work at all. Installation of this project is simple just clone it then cd path/to/project then npm install && npm run dev or something similiar depending on OS.
In demo it's also not hovering entire page but it leave space for button as you'll see if you clone it.
Well actually I handle to fix transitions in demo repo now the only issue is that it doesn't veil/cover entire page but it leave space for root content. Pull repo again to see that.
Issue was that I was using bad transition styles and that I didn't have fixed position with top: 0 left: 0 on my panel component. After fixing that it's working correctly as you can inspect in demo repository.
Sorry for wasting time for issue that I fixed myself but it was much harder to troubleshoot in origin big project. When I created this demo repo it became so easy.
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/
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.
I am messing with Stylish for Firefox trying to do some fancy userchrome stuff involving animations. My userstyle attempts to make a button group that slides in smoothly when hovered over, and slides out smoothly when not, and it is specific to the buttons created by the Facebook service add-on found here https://www.facebook.com/about/messenger-for-firefox but should easily be able to be adapted to other buttons with the right CSS selectors.
Here is the userstyle with only sliding out implimented:
#namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#social-toolbar-item {
overflow: hidden;
}
#social-toolbar-item:not(:hover) {
width: 31px;
}
#social-toolbar-item:hover {
animation: open 500ms;
width: 128px;
}
#keyframes open {
0% {width: 31px;}
100% {width: 128px;}
}
It works perfectly for sliding out, but when I add one line of the code for sliding back in:
#social-toolbar-item:not(:hover) {
animation: open 500ms reverse;
width: 31px;
}
everything falls apart, and none of the animations function, the buttons instantly appear and disappear when hovered over and not hovered over respectively.
Is there a way to achieve the two way sliding effect I want, and if so, what is it?
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;