I am doing some mistake in animating the image.Can anyone help me in making it correct. Codepen link
<div class="animation"></div>
You have to put a sprite with each step with the same width and height, like 10 steps, and in your keyframe animation could split the animation by 10 (10%,20%) and each keyframe move to this famous sprite width. Start by make a good sprite ;)
Demo : https://jsfiddle.net/simurai/CGmCe/
....
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
....
Related
I would like to make a text from my div class "fadeOut" to disappear after being displayed for 2 sec.
Is there a simple way to do that with a css transition ?
$('#errMsg').append('<div class="fadeOut">Beware</div>')
Looks like you are using jQuery
try this
$('#errMsg').append('<div class="fadeOut">Beware</div>').delay(2000).fadeOut();
If you need a pure CSS solution try this
#errMsg {
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
to {
opacity:0
}
}
<div id='errMsg'>This is will hide after 5 seconds</div>
You can use the css transition property transition-delay:
.element {
transition-delay: 3s;
}
Here is a list of applicable transition properties:
/* property name | duration | timing function | delay */
transition: all 4s ease-in-out 1s;
You can read more about transition delays here:
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay
I thought I'd try out a basic bouncing icon, but I'm not seeing any bounce, and I'm stumpted as to why (are there any features in chrome/FF dev tools specifically for css animations?). I've declared keyframes for each browser prefix, and done:
animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
-o-animation: bounce 2s infinite;
What else am I missing? Here's the fiddle: https://jsfiddle.net/p0n5dL59/
The animation properties you defined in your #keyframes need to go on the element the animation applies to instead. Then the #keyframes needs to define what happens in the animation, like
#keyframes animation-name {
to {
color: red;
}
}
Here's a reference https://css-tricks.com/snippets/css/keyframe-animation-syntax/
I have bounce animation on my page, which bounces five times initially, and then bounces again on hover, this is working on Chrome and Firefox (Perfectly), but on IE, after first 5 times of bouncing, the animation does not happen when I hover.
.animate>#icon {
-webkit-animation: bounce 2s ease 5;
-moz-animation: bounce 2s ease 5;
-ms-animation: bounce 2s ease 5;
animation: bounce 2s ease 5;
}
.animate:hover>#icon {
-webkit-animation: bounce 2s ease infinite;
-moz-animation: bounce 2s ease infinite;
-ms-animation: bounce 2s ease infinite;
animation: bounce 2s ease infinite;
}
The Hover is working fine, as I tried testing the hover issue on IE, (by adding a display: none; property), it is working as expected, but the animation is not starting once it has stopped. Any ideas or workarounds for the same would be really appreciated.
Here's a fiddle to play with: https://jsfiddle.net/qgchhn99/
I'm trying to delay an animation as well as a transition but it doesn't work for some reason. The animation and the opacity transition runs instantly instead of waiting 4 seconds.
I got a status message which appears when a form is submitted (the classes gets added dynamically):
<p class="success success--auto-hide">Some message</p>
Then I have this animation which will hide the element after 4 seconds:
#-webkit-keyframes cssAnimation {
to {
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
}
#keyframes cssAnimation {
to {
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
}
However, I also want the hiding to be smooth so I added a transition on opacity as well as the hiding animation:
.success {
color: green;
opacity: 1;
-webkit-transition-delay: 4s;
transition-delay: 4s;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
.success--auto-hide {
opacity: 0;
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation: cssAnimation 0s ease-in 4s forwards;
-moz-animation: cssAnimation 0s ease-in 4s forwards;
-o-animation: cssAnimation 0s ease-in 4s forwards;
animation: cssAnimation 0s ease-in 4s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
I'm sure I'm close to having it correct, so how should I modify it so that both the animation and transition waits 4 seconds before it executes?
With the .success--auto-hide class you've already hidden the element before the animation begins, with 'opacity: 0;'.
When you remove it, it works fine!
Also, you're giving the delay time now two times, so you can also remove the animation-delay property.
See here: http://codepen.io/anon/pen/WvKjWY
I managed to solve it by increasing the animation duration from 0s to 4s. Having it at 0 caused the hiding animation to execute instantly, thus preventing the opacity transition to run in parallel with the animation. I also decreased the opacity duration to 3s instead of 4s to allow it to be completely hidden before setting the width and height to 0, which would cause the text to jump down in an oddly fashion for a split second before it became completely hidden.
I also realised that I had already set the delay in the shorthand so I could remove the animation-delay property altogether.
.success {
color: green;
opacity: 1;
-webkit-transition-delay: 3s;
transition-delay: 3s;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
.success--auto-hide {
opacity: 0;
-webkit-animation: cssAnimation 4s ease-in 4s forwards;
-moz-animation: cssAnimation 4s ease-in 4s forwards;
-o-animation: cssAnimation 4s ease-in 4s forwards;
animation: cssAnimation 4s ease-in 4s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
I want to apply css animation on image only twice on mouseover
#keyframes vibrate
{
0% {transform: rotate(10deg)}
25% {transform: rotate(-10deg)}
50% {transform: rotate(0)}
75% {transform: rotate(10deg)}
100% {transform: rotate(0)}
}
But nothing seems to work. See DEMO
You need to have the -webkit- and -moz- prefixes on the #keyframes too.
So all of the #keyframes will have 3 copies, 2 with the prefixes and 1 without.
Also in the animation shorthand definition instead of infinite use the number of the times you want the animation to happen, 2.
Demo https://jsfiddle.net/ju4cuzqL/7/
You should set the animation-iteration-count: 2; if you want to control the number of iterations it runs.
DEMO
Also you have the animation explicitly running infinitely many times:
-webkit-animation: vibrate 0.1s linear 0s infinite both;
is the same thing as:
{
animation-name: vibrate;
animation-duration: 0.1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: both;
}
Your infinite property should be 2 instead:
animation: vibrate 0.1s linear 0s 2 both;
-webkit-animation: vibrate 0.1s linear 0s 2 both;