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">
Related
This may be a dumb question (haven't done JS/HTML in a bit). I want this animation to be smooth all the way through but for some reason, it is stopping in the middle for a short period of time then resuming. Adding more steps to try and smooth the transition only seems to make is pause for longer. Is there a fix for this?
#under {
color: black;
font-size: 28px;
animation-duration: 4s;
animation-name: example;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
#keyframes example {
0% {
transform: translateX(-330px);
}
50% {
transform: scaleX(3);
}
100% {
transform: translateX(330px);
}
}
<body>
<div id="under">
<p> - </p>
</div>
</body>
To keep things moving evenly, you need to define your scaleX values at 0% and 100%. In addition, I changed your timing function from ease-in-out to linear. At 50%, translateX is already at 0 since you defined the start and end values. For consistency, I added the 0 value at 50%.
#under {
background-color: #000;
color: white;
animation-duration: 4s;
animation-name: example;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
width: 100px;
height: 50px;
}
#keyframes example {
0% {
transform: scaleX(1) translateX(-330px);
}
50% {
transform: scaleX(3) translateX(0);
}
100% {
transform: scaleX(1) translateX(330px);
}
}
<div id="under"></div>
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'm trying to delay the trigger of a CSS animation (not slow down the animation itself, but delay it a few seconds before starting). And the image should not display before the animation runs. I looked through the other questions, and they don't seem to address this.
MY FIDDLE: http://jsfiddle.net/omarel/guh5f8bs/
CSS
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
100% {
-webkit-transform: translateX(0%);
}
}
HTML
<div class="slideRight">
HI
</div>
Side note: Also is there a way to get it to work with an <a> tag? Animations don't seem to play nice with this:
<a class="slideRight">
HI
</a>
Delaying the start of the animation is very simple. Simply add the animation-delay property to your code:
.slideRight{
animation-name: slideRight;
animation-duration: 1s;
animation-timing-function: ease-in-out;
visibility: visible !important;
/* New code here: */
animation-delay: 1s;
}
It's important to note that animation-delay only delays the start of the animation from the beginning. If you have a repeating animation, it won't add the delay to the same spot of each loop; only to the very beginning. There's currently no CSS property capable of that kind of looped delay.
All major browsers currently support animation-delay without the need for vendor prefixes.
As for your second question regarding the <a> element: Yes, it can work. The reason it's not working for you now is because <a> elements are inline elements. In order to make it work like you're expecting, add display: inline-block; to the .slideRight{} selector. Ultimately this is what your code will look like:
.slideRight{
animation-name: slideRight;
animation-duration: 1s;
animation-timing-function: ease-in-out;
visibility: visible !important;
/* New code here: */
animation-delay: 1s;
display: inline-block;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
100% {
transform: translateX(0%);
}
}
<a class="slideRight">HI</a>
JSFiddle Example
Add a settimeout function
Hi there, you could add an event listen that get when you mouseover the certain element and then calls the function after 1 second.
$('slideRight').on('mouseover',function(){
window.setTimeout(function(){
$this.addClass('onesecond');
}, 1000); //<-- Delay in milliseconds
});
div {
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;
}
Source:
https://www.w3schools.com/cssref/css3_pr_animation-delay.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
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.