I work on bouce effect and i would like to know why this example doesn't work on firefox ???
http://jsfiddle.net/Nath/34eMN/
css part:
div { -webkit-animation: bounce 1.5s infinite ease-in-out; }
#-webkit-keyframes bounce {
0%, 20%, 60%, 100% { -webkit-transform: translateY(0); }
40% { -webkit-transform: translateY(-10px); }
80% { -webkit-transform: translateY(-5px); }
}
Because all your transforms are specified to webkit which is not Firefox. Remove the -webkit- part and see what happens. Firefox does not need prefixes and only webkit browsers do.
Related
I was watching the animate.css web page, I want to make the color changing animation that they applied in the animate.css title of their main page, how can I do that?
https://daneden.github.io/animate.css/
Try it out
h1 {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: colored 10s infinite linear;
background-image: -webkit-linear-gradient(90deg, #f35626, #feab3a);
}
#-webkit-keyframes colored {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
}
}
<h1>Colored text</h1>
Use web inspector to find out (right click and select inspect element).
They have an h1 with the following style definitions:
h1.site__title {
color: #f35626;
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;.
-webkit-animation: hue 60s infinite linear;
}
#-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
}
}
Im working with animate.css for a bouncein-out simple animation for a login slide.
http://www.freelancing.com.br/
This is the trigger:
$('body').on('click', '.actions .login', function(){
$('#login').removeClass('bounceOutUp');
$('.overlay').fadeIn(300);
$('#login').addClass('bounceInDown');
});
$('body').on('click', '#login .close', function(){
$('#login').removeClass('bounceInDown');
$('#login').addClass('bounceOutUp');
});
and the basic css markup:
.animated {
-moz-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-transition: all 0.3s ease-in-out;
}
#-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
}
}
#-moz-keyframes bounceOutUp {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(20px);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
I really dont know why this is rolling on at all. The markup is just the same as chrome, and it rolls just fine there.
Unlike Chrome, the transition property is applied to properties inside an animation in Firefox.
Remove the [-moz-]transition property and your CSS3 animation will work fine in both Firefox and Chrome.
ps. You're missing -moz-box-sizing: border-box; in some of your elements.
I've created a simple bounce animation which i'm applying to the :hover state of an element:
#keyframes bounce {
0% {
top: 0;
animation-timing-function: ease-out;
}
17% {
top: 15px;
animation-timing-function: ease-in;
}
34% {
top: 0;
animation-timing-function: ease-out;
}
51% {
top: 8px;
animation-timing-function: ease-in;
}
68% {
top: 0px;
animation-timing-function: ease-out;
}
85% {
top: 3px;
animation-timing-function: ease-in;
}
100% {
top: 0;
}
}
.box:hover {
animation: bounce 1s;
}
The animation works fine, with the exception that when you remove your cursor from the element it abruptly stops. Is there anyway to force it to continue the set number of iterations even if the mouse has exited? Basically what I'm looking for here is an animation triggered by the :hover state. I'm not looking for a javascript solution. I haven't seen anyway to do this in the spec, but maybe there's an obvious solution I've missed here?
Here's a fiddle to play with: http://jsfiddle.net/dwick/vFtfF/
I'm afraid that the only way to solve this is with a bit of javascript, you must add the animation as a class and then remove it when the animation finishes.
$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
$(this).removeClass("animated")
})
$(".box").hover(function(){
$(this).addClass("animated");
})
http://jsfiddle.net/u7vXT/
I created a JsFiddle with this answer from the same post https://stackoverflow.com/a/7697786/8335898 using pure Javascript if anyone wants to use it.
const elements = document.getElementsByClassName('box');
for (let i = 0; i <= elements.length; i++) {
elements[i].addEventListener('animationend', function(e) {
elements[i].classList.remove('animated');
});
elements[i].addEventListener('mouseover', function(e) {
elements[i].classList.add('animated')
})
}
Same answer with #methodofaction but for anyone using React:
import React, { useState } from 'react';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
export default function Icon({ icon }) {
const [animated, setAnimated] = useState(false);
return (
<div
onMouseEnter={() => setAnimated(() => true)}
onAnimationEnd={() => setAnimated(() => false)}
>
<FontAwesomeIcon icon={icon} className={animated ? 'animated' : ''} />
</div>
);
}
just to improve Duopixel answer, when runnig infinite animitation I have to do:
$(".box").css("animation-iteration-count", "1");
$(".box").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
$(this).removeClass("animated")
})
$(".box").hover(function(){
$(".box").css("animation-iteration-count", "infinite");
$(this).addClass("animated");
})
This just not abruptly end the animation.
A simple trick will do the job :
-webkit-animation:swing 3600ms ease-in-out 6000s;
-webkit-transform-origin:top;
Set the 'delay' with an high value on the element (not :hover).
From: Stackoverflow - Robert McKee
This won't work in all situations, and won't work for OP without some compromises but I solved this problem by adding an animation to the :not(:hover) selector:
#keyframes stopBounce {
0% {
top: 15px;
}
100% {
top: 0px;
}
}
#keyframes bounce {
ops: bounce code
}
.box{
top: 0px;
transition: top 250ms 1000ms ease-in-out,
}
.box:hover{
animation-name: bounce;
animation-fill-mode: both;
animation-duration: 250ms;
}
.box:not(:hover){
animation-name: stopBounce;
animation-duration: 250ms;
animation-delay: 1000ms;
animation-fill-mode: both;
}
So, what this doesn't do is allow the animation to continue all the way through. As far as I can tell a pure CSS solution to that is impossible. What it does do is allow it to smoothly transition back to it's starting position. The trick is having two selectors, only one of which can be active at any one time.
What this allows us to do is have an animation that plays when the user hovers, and a separate animation that plays whenever the user stops hovering. Since both of these animations can be controlled, it allows us to ensure that the transition between them is smooth.
Like I said, this doesn't fully solve the problem, but it doesn't use JavaScript and will keep things smooth.
CSS might help in some cases but not all, below is the code that will animate letter spacing on both hover and after hover.
h1
{
-webkit-transition:all 0.3s ease;
}
h1:hover
{
-webkit-transition:all 0.3s ease;
letter-spacing:3px;
}
<body>
<h1>Hello</h1>
</body>
See this fiddle for an example of what I mean or view this code.
test
a{
background-color:#ccc;
transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;
}
a:hover{
background-color:#888;
}
a{
-moz-animation-duration: 3s;
-moz-animation-name: move;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
}
#-moz-keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 50px;
}
}
The animation occasionally jumps about or changes speed, particularly when you hover over it... I have tried running the animation on its own (without the transition defined) and it runs smoothly and as expected. I have run the transition on its own and it works as expected. The combination seems to cause the problem.
Could be a Firefox implementation bug? I'm running Firefox 6.0.1, Ubuntu 11.04.
You need to replace 'all' by 'background'. Then it works fine. I think when you hover it will transition all styles, so also the current-margin-left to the new margin-left, which is the same, so the margin doesn't change for the duration of the transition. Afterward the animation takes precedence again and you see the jump.
I have a pretty simple (or at least I think it is) animation. All I'm animating is the -webkit-background-size.
#bubble { position:relative; width:397px; height:326px; background:url('../img/mobile/webkit/bubble.png') no-repeat bottom right; -webkit-background-size:100% 100%; -webkit-animation-name:resize; -webkit-animation-duration:1s; -webkit-animation-iteration-count:1; -webkit-animation-timing-function: ease-in; }
#-webkit-keyframes resize {
0% { -webkit-background-size:0% 0%; }
90% { -webkit-background-size:100% 100%; }
95% { -webkit-background-size:95% 95%; }
100% { -webkit-background-size:100% 100%; }
}
It works nicely in Safari on the desktop, but on the iPhone, the animation is very choppy. Which is odd, because I've seen lots of demonstrations of CSS animation on my iPhone that run silky smooth. Am I going about this animation the wrong way?
Basically, it's a speech bubble that starts out at 0%, scales up to 100%, then 95%, then 100%. Sort of like a bounce-out ease effect.
You must do some trickery to allow the GPU to kick in, if you can scale the whole div instead of just the background then this will make it smooth...
#bubble {
position:relative;
width:397px;
height:326px;
background:url('../img/mobile/webkit/bubble.png') no-repeat bottom right;
-webkit-background-size:100% 100%;
-webkit-animation: resize 1s ease-in 1; /*shorthands are better!*/
-webkit-transform: scale3d(100%, 100%, 1);
}
#-webkit-keyframes resize {
0% { -webkit-transform: scale3d(0%, 0%, 1); }
90% { -webkit-transform: scale3d(100%, 100%, 1); }
95% { -webkit-transform: scale3d(95%, 95%, 1); }
100% { -webkit-transform: scale3d(100%, 100%, 1); }
}
Try to add -webkit-transform:transform to the bubble css