I have the following CSS:
#-webkit-keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
#-webkit-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.intro-text-0 {
opacity: 0;
-webkit-animation: fade-in 1s linear 1s,
fade-out 1s linear 3s;
-webkit-animation-fill-mode: forwards;
}
.intro-text-1 {
opacity: 0;
-webkit-animation: fade-in 1s linear 2s,
fade-out 1s linear 4s;
-webkit-animation-fill-mode: forwards;
}
And the simple HTML code:
<div class="intro-text-0">Hello</div>
<div class="intro-text-1">Holla</div>
When I run it, "Hello" appear in 1 second and in 3 seconds instead of fading out for 1 second, it fades out instantly. Here it is on JSFiddle: http://jsfiddle.net/3er6y0df/
I tried switching it to this:
.intro-text-0 {
opacity: 0;
-webkit-animation: fade-in 1s linear 2s,
fade-out 1s linear 4s;
-webkit-animation-fill-mode: forwards;
}
And it works perfectly.
I must mention, that this bug appeared only in Chrome (Version 37.0.2062.120 Built on Debian 7.6, running on Debian 7.7 (281580) (64-bit)), I check it out in Firefox and IE11 and there is no problem there.
Not really a bugfix though it could be a alternative.
Instead of animating a element with keyframes + animation on the elements itself why not put it all in the keyframe animation?
#keyframes AnimateMe {
0% { opacity:0%; }
80% { opacity:100%; }
100% { opacity:0%; }
}
I have experimented a bit and found a much simpler solution:
-webkit-animation: fade-in 1s linear 1001ms,
fade-out 1s linear 3s;
-webkit-animation-fill-mode: forwards;
Using 1001ms instead 1s (=1000ms) will not be noticed by a regular human eye :)
Related
I create Fade in and Fade out effect using different CSS ease using this site: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function I use few ease codes from that website but It seems like the letters are just blinking, I need them to come in one a time in sequential order (fading in).
.fade-in {
animation: fadeIn infinite alternate ease 2s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<h1 class="fade-in">Its just fade in not out i want fade in and out in loop never stop it.</h1>
To make it feel like fade in and out, assign it a duration, Like:
animation: fadeIn 2s infinite alternate ease;
Here the 2s is the duration or we can say the total time taken by the animation.
.fade-in {
animation: fadeIn 2s infinite alternate ease;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<h1 class="fade-in">Its just fade in not out i want fade in and out in loop never stop it.</h1>
Codepen: https://codepen.io/manaskhandelwal1/pen/mdrzmKr
I'm working with HTML5 banner having a lot of CSS3 animation. To make reusable keyframe animation I'm using multiple animation on single element. It's working perfectly except safari.
CSS:
.text1 {
-webkit-animation: fadeOutRight 1s 3s forwards;
animation: fadeOutRight 1s 3s forwards;
}
.text2 {
-webkit-animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
}
.text3 {
-webkit-animation: fadeInLeft 1s 8s both;
animation: fadeInLeft 1s 8s both;
}
/* fadeInLeft */
#-webkit-keyframes fadeInLeft {
0% { -webkit-transform: translateX(-100px); opacity: 0; }
100% { -webkit-transform: translateX(0px); opacity: 1; }
}
#keyframes fadeInLeft {
0% { transform: translateX(-100px); opacity: 0; }
100% { transform: translateX(0px); opacity: 1; }
}
/* fadeOutRight */
#-webkit-keyframes fadeOutRight {
0% { -webkit-transform: translateX(0px); opacity: 1; }
100% { -webkit-transform: translateX(100px); opacity: 0; }
}
#keyframes fadeOutRight {
0% { transform: translateX(0px); opacity: 1; }
100% { transform: translateX(100px); opacity: 0; }
}
jsfiddle link
Workable solutions:
Wrap the element with another/more element & add single animation to each element. This solution needs extra styling for wrapper element.
Merge multiple animation into one & this solution increase the complexity of the keyframes rule and it's not easily maintainable for complex animation.
According to accepted answer of another stackOverflow post –
You cannot animate same attribute more than once, on a same element, the last one will overwrite other.
It’s only true for safari in my case & first animation is only running not
second one. If I don’t animate same property on multiple animation
then it’s also fine for safari(jsfiddle). This one is not
suitable for me because I will need to animate same property in
multiple animations.
Note:
Although I'm using multiple animation on same element but I'm not animating at same time, there is delay between each animation.
Question:
Is it possible to use multiple CSS3 animation on same element regardless of animating property?
For some reason, Safari does not read trough the shorthand method for describing the animation, for example:
animation: test 1s 2s 3 alternate backwards
It needs to be described more detailed with its separate properties listed:
.class{
animation-name: bounce;
animation-duration: 4s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;
}
I got an image
<div class="spin-image">
<img src="images/color-wheel.png" alt="" />
</div>
and its corresponding css
.spin-image {
-webkit-animation:spin 10s linear infinite;
-moz-animation:spin 10s linear infinite;
animation:spin 10s linear infinite;
-webkit-transition-duration: 2s; /* Safari */
transition-duration: 2s;
}
.spin-image:hover {
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation:spin 2s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
What I'm trying to do is to accelerate the image spinning on hover. The animation works, but the transition does not.
If you realise, this is like the animation and the hover animation are two different ones, and they reset to their virtual state of rotation in case they were running all the time you were or weren't hovering.
Unfortunatly, it is not posible to animate the transition between 2 different animation-durations.
Yet if you really really need a solution for this, you could program the animation using transition and a javascript interval that resets the positions for every turn. This way yo can reset the property and the duration of the transition at any time with javascript.
I made you a pen: http://codepen.io/vandervals/pen/aONmVL
This is the css you need:
.spin-image img{
transition: transform 2s linear;
transform: rotate(0deg);
}
.spin-image img.hover{
transition: transform 1s linear;
}
And the JS:
var vel = 2000;
var degs = 0;
var cat = document.querySelector("img");
function repeat(){
if(vel == 1000){
cat.classList.add("hover");
console.log("hover")
}else{
cat.classList.remove("hover");
console.log("nohover")
}
degs+=360;
cat.style.transform = "rotate("+degs+"deg)";
setTimeout(repeat, vel);
}
repeat();
document.querySelector("img").addEventListener("mouseenter",hovering);
function hovering(){
vel = 1000;
}
document.querySelector("img").addEventListener("mouseleave",nohovering);
function nohovering(){
vel = 2000;
}
You can see what I have so far here: http://codepen.io/joe/pen/mkjxi
My goal is to make the lines of text appear in a staggered way, giving a nice effect to the homepage of a site.
My problem is that the 3 bottom lines of text end up reverting back to white. The reason I had made the text transition from white to black is only because I couldn't get display:none or visibility:hidden; to work with the keyframes...
Any help is greatly appreciated! Thanks
The trick is to make use of the forwards value in the animation shorthand property. This changes the fill mode and keeps the last keyframe visible after the animation has run.
Also, there is no need to use separate animations, you could do it with only one. Here is how:
<!-- HTML -->
<div class="text1">Expert Electricians.</div>
<div class="text2">Serving all of Los Angeles,</div>
<div class="text3">Ventura and Orange Counties</div>
<div class="text4">For over 20 years</div>
/* CSS */
div {
color: #fff;
text-transform:uppercase;
}
.text1 {
-webkit-animation:text 2s .5s forwards;
-moz-animation:text 2s .5s forwards;
-o-animation:text 2s .5s forwards;
animation:text 2s .5s forwards;
}
.text2 {
-webkit-animation:text 2s 1s forwards;
-moz-animation:text 2s 1s forwards;
-o-animation:text 2s 1s forwards;
animation:text 2s 1s forwards;
}
.text3 {
-webkit-animation:text 2s 1.5s forwards;
-moz-animation:text 2s 1.5s forwards;
-o-animation:text 2s 1.5s forwards;
animation:text 2s 1.5s forwards;
}
.text4 {
-webkit-animation:text 2s 2s forwards;
-moz-animation:text 2s 2s forwards;
-o-animation:text 2s 2s forwards;
animation:text 2s 2s forwards;
}
#-webkit-keyframes text {
100% {color:#000;}
}
#-moz-keyframes text {
100% {color:#000;}
}
#-o-keyframes text {
100% {color:#000;}
}
#keyframes text {
100% {color:#000;}
}
Here is a live example: http://jsfiddle.net/joshnh/2Sp48/
I was wondering how to make an image blink in CSS, if it is possible. I want to have it blink where it is.
I would also like to change the speed but mainly I want to make it blink.
CSS animations to the rescue!
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
img {
animation: blink 1s;
animation-iteration-count: infinite;
}
http://jsfiddle.net/r6dje/
You can make it a sharp blink by adjusting the intervals:
#keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
http://jsfiddle.net/xtJF5/1/
use setInterval method of Javascript use it as a reference of W3Schools and then change the css from visibility:visible to visiblity:hidden we will not use display:none as it will remove the space of the image as well but we do need the space for the image for the blinking thing to work.
You can do it with CSS easily. Just add below cross browser code in the CSS element of your image. You can set also timing if you change the digit in the code.
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
-webkit-animation:blink normal 2s infinite ease-in-out;
-ms-animation:blink normal 2s infinite ease-in-out;
animation:blink normal 2s infinite ease-in-out;