viewanimation on state change withanimate.css`
But when writing this:
<div ui-view class="view-animation"></div>
//(sass)
.view-animation{
&.ng-enter {
-webkit-animation: fadeInLeft 2s;
-moz-animation: fadeInLeft 2s;
-ms-animation: fadeInLeft 2s;
animation: fadeInLeft 2s;
}
&.ng-leave {
-webkit-animation: bounceOut 1s;
-moz-animation: bounceOut 1s;
-ms-animation: bounceOut 1s;
animation: bounceOut 1s;
}
}
There is 2 sec delay, and in the end content just appears(Similar if I do timeout and apply display:block via js), but animation is not visible.
But when writing this:
.view-animation.ng-enter,
.view-animation.ng-leave {
-webkit-transition:0.5s ease all;
transition:0.5s ease all;
}
.view-animation.ng-enter,
.view-animation.ng-leave.ng-leave-active {
opacity:0;
}
.view-animation.ng-leave,
.view-animation.ng-enter.ng-enter-active {
opacity:1;
}
All works fine
I've tried adding position:absolute; width: 100%; to .view-animation but didn't helped.
Thank you.
Update:
Applying fadeIn animation also works fine, maybe it have something to do with animations that use transform?
Update 2:
Ok inside my ui-view.view-animation I have an element with position fixed this cause animation break, is there is any workaround for this?
Update 3:
adding this to .view-animation
.view-animation{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
Solved my issue, if you have better solution please share.
Related
Discord has a nicely animated page
https://discordapp.com/
The coins are moving up and down really smoothly. How can I copy this logic for my own images?
I started with this code
img {
animation-name: move;
animation-duration: 2.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes move {
0% {
margin-top: 0px;
}
50% {
margin-top: 10px;
}
100% {
margin-top: 0px;
}
}
<img src="https://gonintendo.com/system/file_uploads/uploads/000/013/369/original/bg-header-earn-coins.png">
When testing the code the image is not moving smoothly. I thought using animation-timing-function: ease-in-out; would do it for me.
Is something missing there?
When it comes to animations, duration and distance moved are highly important. The type of animation is also important. Using margins instead of CSS transforms makes it less likely that the GPU will be used, which is generally better at animating than not using GPU.
Basically, your code is not a faithful recreation of the timing and animation styles as are used on discord. This is closer:
img {
animation-name: move;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
#keyframes move {
0% {
transform: translate3d(0,-4px,0)
}
to {
transform: translate3d(0,4px,0)
}
}
<img src="https://gonintendo.com/system/file_uploads/uploads/000/013/369/original/bg-header-earn-coins.png">
I'm trying to implement this simple animation for a rock-paper-scissors game I'm developing:
http://jsfiddle.net/franciov/kbngz27s/1/
#keyframes arm-out {
from {
left: 0em;
}
to {
left: 5em;
}
}
.player > .arm.out {
animation-name: arm-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
Basically, I want the player to:
pull back his arm when the game loads (arm-in animation)
show his arm when the 'Play' button is clicked (arm-out animation) Note: I would like the player to show the arm after a while, at the moment this is implemented with a window.setTimeout but I would like to use the animation-delay property
show the hand shape after a delay (reveal animation, in JSFiddle the shape is always 'scissors')
The animation-delay for the point (3) works well:
#keyframes reveal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.hand.reveal {
animation-name: reveal;
animation-delay: 0.5s;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
but when I try to add a animation-delay property for the point (2), things does not work properly anymore, as you can try on the next JSFiddle:
http://jsfiddle.net/franciov/kbngz27s/2/
.player > .arm.out {
animation-name: arm-out;
animation-delay: 0.8s; /* This is not working properly */
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
Any ideas?
I tried the JSFiddles above on Chrome 45.0.2454.101 and Firefox 43.0a2.
You simply have to add left: 0; to .arm.out, because at the moment you click the button, it removes the in class and you have left: 5em; in your arm class.
Set the left position of "out arm" to zero then let the animation do the job.
.player > .arm.out {
left: 0; /* Add this one. */
animation-name: arm-out;
animation-delay: 0.8s; /* This is working for me (Chrome 45) */
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
Fiddle : http://jsfiddle.net/kbngz27s/3/
(Added some time to .hand.reveal so it doesn't appear before the arm). Strangely it sometimes fails as you say, but not every time...
I have written the following CSS and put it element:after to delay the hover effect to close.
transition: .50s all;
transition-delay: 3s;
Now I want the hover effect will be close after 3 even if the cursor is on the element.
In CSS is there any way to do it?
You could use a keyframe animation instead, whilst setting the iteration count to 1:
note
Prefixing will be required.
Demo
div {
transition: all 0.8s;
height: 300px;
width: 300px;
background: tomato;
}
div:hover{
-webkit-animation: 3s linear hoverit;
-webkit-animation-iteration-count: 1;
-moz-animation: 3s linear hoverit;
-moz-animation-iteration-count: 1;
animation: 3s linear hoverit;
animation-iteration-count: 1;
}
#-webkit-keyframes hoverit{
0%{background:tomato;}
10%{background:blue;}
90%{background:blue;}
100%{background:tomato;}
}
#-moz-keyframes hoverit{
0%{background:tomato;}
10%{background:blue;}
90%{background:blue;}
100%{background:tomato;}
}
#keyframes hoverit{
0%{background:tomato;}
10%{background:blue;}
90%{background:blue;}
100%{background:tomato;}
}
<div></div>
use animation instead of transition
#keyframes doMagic {
0% {
// initial styles
}
100% {
// hover styles
}
}
.selector {
animatiom: doMagic 3s ease forwards;
animation-delay: 3s; // not sure if u need it
}
using the keyword forwards you tell the animation to stay in its finished state
read more on http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
if you DONT put that . the animation will play to 100% then go to initial state
I have multiple divs with animations, created in CSS, on my page. When the last div with animation is finished animating I wish to have the whole sequence to start over. My animations all have different delay times, and animations. I've tried the "animation: infinite" but what that achieves is the each individual animation will run again immediately after the animation has finshed. I need it start from the beginning after all of the animations have completed.
Anyone know how to achieve this?
Sample CSS
.openDiv {
width: 0px;
height: 513px;
background-image: url("CLS-circle-Ring-faded.png");
animation-name: grow;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-delay: 2s;
transition-delay: 10s;
-webkit-animation-name: grow;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 2s;
-webkit-transition-delay: 10s;
}
#-webkit-keyframes grow {
0% {
width: 0px;
}
100% {
width: 1379px;
}
} /* Standard syntax */#keyframes grow {
0% {
width: 0px;
}
100% {
width: 1379px;
}
}
I am trying to create a delay for an image to load. I have the following, but I really want it to delay loading for 10 seconds, not just fade in. How can I modify this to get a delay before loading?
.image {
animation: fadeinLoad 10s;
}
#keyframes fadeinLoad {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<img class="image" src="https://i.stack.imgur.com/od9bJ.png" />
We need to give the .image class opacity: 0 so it loads hidden. Then, delay the animation:
animation: fadeinLoad 1s 5s forwards;
The second time of 5s specifies a wait to activate time of 5 seconds. The forwards property pauses the animation at 100%.
The shorthand above is the same as this:
animation-name: fadeinLoad;
animation-duration: 1s;
animation-delay: 5s;
animation-fill-mode: forwards;
Read more on CSS animation over on the MDN.
Example
Count to five :)
.image {
animation: fadeinLoad 1s 5s forwards;
opacity: 0;
}
#keyframes fadeinLoad {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<h1>Count to 5!</h1>
<img class="image" src="https://i.stack.imgur.com/od9bJ.png" />
You can do this much simpler than keyframe animations.
Change your code to something like this:
#topHeader .image {
transition-delay: 10s;
transition: opacity 1s;
opacity: 0;
}
#topHeader .image.YOUR-FIRING-CLASSNAME-HERE {
opacity: 1;
}
Plus, the days of needing to prefix every CSS3 property are pretty much over. You don't need -o-, -ms-, etc. etc.
Save for keyframes, as those apparently don't have large-scale standardized support just yet.