In font awesome how can i use this code : <i class="fa fa-spinner fa-spin"></i> work on mouse over only?
Instead of overriding the class, you can also just create another one for hover only:
.fa-spin-hover:hover {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
<i class="fa fa-circle-o-notch fa-spin-hover"></i>
<i class="fa fa-spinner fa-spin-hover"></i>
Fiddle: http://jsfiddle.net/Xw7LH/1/
Note: if using Font-Awesome 4.2+ you may need to namespace the animation with "fa-":
.fa-spin-hover:hover {
-webkit-animation: fa-spin 2s infinite linear;
-moz-animation: fa-spin 2s infinite linear;
-o-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
You could also use javascript with the jquery library:
$('.fa-spinner').hover(function() {
$(this).addClass('fa-spin');
}, function() {
$(this).removeClass('fa-spin');
});
That would make it only spin on hover and reset back to its original position when its over - that being said it can look weird with some of the icons (I've only used it with the cog). For infinite spinning on hover you could just do this:
$('.fa-spinner').hover(function() {
$(this).addClass('fa-spin');
});
jquery link: https://jquery.com/
so make it work in my site css i change this
.fa-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
with this
.fa-spin:hover {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
just use font awesome ccs file
for more details
http://l-lin.github.io/font-awesome-animation/
they have detailed documentation on how to use the ccs
in font awesome 5, I accidentally discovered that this is done by the new svg libraries that it implements
I do this:
.fa-spin-hover:hover svg {
-webkit-animation: fa-spin 2s infinite linear;
-moz-animation: fa-spin 2s infinite linear;
-o-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;}
then it is assigned to the superior element and ready
Related
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; }
}
....
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 made an animation css3 however need to be run every 3 seconds infinite, unable to do only with css.
CSS3
.halo-robford-animate{
animation: leaves 0.3s ease-in-out 3 alternate;
-webkit-animation: leaves 0.3s ease-in-out 3 alternate;
}
Codepen
You are missing animation-iteration-count. The formal syntax for animation is:
animation: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>
Source + additional info
You could change it to:
.halo-robford-animate{
animation: leaves 0.3s ease-in-out 3s infinite alternate;
-webkit-animation: leaves 0.3s ease-in-out 3s infinite alternate;
-moz-animation: leaves 0.3s ease-in-out 3s infinite alternate;
-o-animation: leaves 0.3s ease-in-out 3s infinite alternate;
}
Note the measurement of 3 requires a unit, so added an s to make it 3s. The second time measurement is the animation-delay which specifies the delay in which it will start, not between animations.
Demo
Or use the properties individually:
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
If you want a 3 second gap between the animations where the animation takes 0.3s, you'll need to make a slight adjustment. Change the animation-duration to 3s (which is the 0.3s you have)
.halo-robford-animate{
animation: leaves 3s ease-in-out 3s infinite alternate;
-webkit-animation: leaves 3s ease-in-out 3s infinite alternate;
-moz-animation: leaves 3s ease-in-out 3s infinite alternate;
-o-animation: leaves 3s ease-in-out 3s infinite alternate;
}
And make animation only occur for the first 0.3s:
#-webkit-keyframes leaves {
0% {
opacity: 1;
}
5% {
opacity: 0.5;
}
10% {
opacity: 1;
}
}
Demo 2
Try and add this to your code
.halo-robford-animate{
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}