I am trying to find a transitioning CSS code to transition two images. I want the first image to be shown for 4 seconds then fade into a second image which will stay the same for for seconds then fade back to the first. Right now I am not using CSS and am finding most CSS tutorials are formatted for an on :hoover. I want my image to constantly change without a :hover being needed.
The flexi ad coding I am using now is a ans works fine in waterfox and explorer but you can see the images being loaded in chrome with a bad flicker.
Here's the example of what I am working with. The script I am using now is actually transitioning through 30 images i made some that fade from one to the next and thats why it looks like it fades. I would like some kind of CSS that will only require 2 images and fade one to the next every 4 seconds.
http://www.vulgarmediaproductions.com/walt/walt.shtml
You need to use keyframe animations for this - DEMO
HTML:
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-a-web.jpg'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-45-a-web.jpg'>
CSS:
img {
position: absolute;
width : 320px;
height: 180px;
}
img:last-child { animation: fader 4s infinite alternate; }
#keyframes fader { to { opacity: 0; } }
EDIT
If your images have transparency, then you'll need to animate the opacity for both of them, not just for the one on top. Like this - DEMO
img {
opacity: 0;
position: absolute;
width : 256px;
height: 256px;
}
img:first-child { animation: fadein 8s infinite alternate; }
img:last-child { opacity: 1; animation: fadeout 8s infinite alternate; }
#keyframes fadein { 50% { opacity: 1; } }
#keyframes fadeout { 50% { opacity: 0; } }
Also, keep in mind that you'll have to use prefixes (I did not use any since dabblet includes -prefix-free and it's easier to highlight the idea that way):
img:first-child {
-webkit-animation: fadein 8s infinite alternate; /* Chrome, Safari, Android, Blackberry */
-moz-animation: fadein 8s infinite alternate; /* FF, FF for Android */
-o-animation: fadein 8s infinite alternate; /* Opera 12 */
animation: fadein 8s infinite alternate; /* IE 10, FF 16+, Opera 12.5 */
}
#-webkit-keyframes fadein { 50% { opacity: 1; } }
#-moz-keyframes fadein { 50% { opacity: 1; } }
#-o-keyframes fadein { 50% { opacity: 1; } }
#keyframes fadein { 50% { opacity: 1; } }
/* same for the other set (fadeout) */
Not tested and just written on the fly, but should work.
If you have any problems getting it to work, let me know...
You may want to debug this using FireBug for Firefox. It helps you alot playing arround with CSS, HTML and JavaScript.
CSS3:
.slideShow
{
position: absolute;
left: 0;
top: 0;
-webkit-transition: all 200ms ease-in-out 0s;
-moz-transition: all 200ms ease-in-out 0s;
-ie-transition: all 200ms ease-in-out 0s;
-o-transition: all 200ms ease-in-out 0s;
transition: all 200ms ease-in-out 0s;
}
.slideShowWrapper { position:relative; }
HTML:
<div class="slideShowWrapper" id="mySlideShow" style="width:400px;height:300px;">
<div class="slideShow" style="opacity:1.0"> (image 1 goes here) </div>
<div class="slideShow" style="opacity:0.0"> (image . goes here) </div>
<div class="slideShow" style="opacity:0.0"> (image . goes here) </div>
<div class="slideShow" style="opacity:0.0"> (image N goes here) </div>
</div>
JS:
function ssCycle(_obj)
{
var _oList=_obj.getElementsByTagName('div');
for (var _trace=0;_trace<oList.length;_trace++)
{
if(_oList[_trace].getAttribute('style').indexOf('opacity:1.0')>0)
{
_oList[_trace].style.opacity='0.0';
try
{
_oList[(_trace+1)].style.opacity='1.0';
}
catch(_e)
{
_oList[0].style.opacity='1.0';
}
}
}
};
(function(_src){ void(var tmrFunc = "void(ssCycle(document.getElementById("+_src+"));";setInterval(tmrFunc,4000);}).call('mySlideShow');
Related
I am using steps() in my css animation. Now I want to start the css animation after a particular time. Below is an example.
#-webkit-keyframes typing {
from { width: 0 }
to { width:455px; }
}
#-moz-keyframes typing {
from { width: 0 }
to { width:16.3em }
}
#-webkit-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
#-moz-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
.typing_animation h3 {
position: absolute;
font-size: 36px;
width:455px;
left: 0;
top:110px;
font-style: italic;
display: inline-block;
margin-left: -48px;
letter-spacing: 4px;
white-space: nowrap;
overflow: hidden;
border-right: 1px solid #000;
-webkit-animation: typing 10s steps(25, end), blink-caret 1s step-end infinite;
-moz-animation: typing 10s steps(25, end), blink-caret 1s step-end infinite;
}
The above one results in a cool typing animation. However, it starts right away. I want to hold the typing and start it after a delay of say 5 seconds.
Thanks
PS: A Fiddle in case that's useful
Maybe it's late but this is what you need:
Change your element width from "455px" to "0" ;
Then add "animation-fill-mode: forwards" into your ".typing_animation h3" class, so this css rule force to animation can change the width;
Add your desired delay like this: "animation-delay: 3s".
Notice: Don't forget prefixes and if you use several animations on a element, it's better to use a shorthand animation property. see tutorials.
This is a example: jsfiddle
/* typing animation */
#keyframes typing {from {width: 0} to {width:19em}}
#-webkit-keyframes typing {from {width: 0} to {width:19em}}
#-moz-keyframes typing {from {width: 0} to {width:19em}}
/* blinking animation */
#keyframes blink-caret {from, to {border-color: transparent} 50% {border-color: #000000}}
#-webkit-keyframes blink-caret {from, to {border-color: transparent} 50% {border-color: #000000}}
#-moz-keyframes blink-caret {from, to {border-color: transparent} 50% {border-color: #000000}}
.my-animation {
width: 0;
overflow: hidden;
white-space:nowrap;
border-right: 0.1em solid #000000;
animation: typing 6s steps(30, end) 4s forwards, blink-caret 1s step-end 4s infinite;
-webkit-animation: typing 6s steps(30, end) 4s forwards, blink-caret 1s step-end 4s infinite;
-moz-animation: typing 6s steps(30, end) 4s forwards, blink-caret 1s step-end 4s infinite;
}
Try the animation-delay property:
-webkit-animation-delay: 5s;
animation-delay: 5s;
Note: Add this to the end of your h3 rule
you can use setTimeout function and add class to the particular element
setTimeout(function(){
$('p').addClass('text-show')
}, 3000);
p
{
font-size:60px;
}
.text-show
{
animation: textshow 2s ease-out forwards;
}
#keyframes textshow {
0% {
transform: scale3d(0.6, 0.6, 0.6);
opacity: 0;
}
100% {
transform: scale3d(1, 1, 1);
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>We Design.</p>
thanks,
Jomin George paul
I am trying to create a cascading effect by applying an animation to each child element. I was wondering if there is a better way to do it than this:
.myClass img:nth-child(1){
-webkit-animation: myAnimation 0.9s linear forwards;
}
.myClass img:nth-child(2){
-webkit-animation: myAnimation 0.9s linear 0.1s forwards;
}
.myClass img:nth-child(3){
-webkit-animation: myAnimation 0.9s linear 0.2s forwards;
}
.myClass img:nth-child(4){
-webkit-animation: myAnimation 0.9s linear 0.3s forwards;
}
.myClass img:nth-child(5){
-webkit-animation: myAnimation 0.9s linear 0.4s forwards;
}
and so on...
So basically, I'd like to have an animation starting for each child but with a delay.
Thanks for any input!
Addition: Maybe I did not properly explain what was my concern: It's about how to do this no matter how many children I have. How to do this without having to write down the properties for every child... for example, when I don't know how many children there are going to be.
Here's a scss way to do it using a for loop.
#for $i from 1 through 10 {
.myClass img:nth-child(#{$i}n) {
animation-delay: #{$i * 0.5}s;
}
}
What you want is the animation delay property.
#keyframes FadeIn {
0% {
opacity: 0;
transform: scale(.1);
}
85% {
opacity: 1;
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.myClass img {
float: left;
margin: 20px;
animation: FadeIn 1s linear;
animation-fill-mode: both;
}
.myClass img:nth-child(1) { animation-delay: .5s }
.myClass img:nth-child(2) { animation-delay: 1s }
.myClass img:nth-child(3) { animation-delay: 1.5s }
.myClass img:nth-child(4) { animation-delay: 2s }
<div class="myClass">
<img src="http://placehold.it/200x150" />
<img src="http://placehold.it/200x150" />
<img src="http://placehold.it/200x150" />
<img src="http://placehold.it/200x150" />
</div>
A CSS preprocessor such as Less.js or Sass can reduce the amount of repetition, but if you're working with an unknown number of child elements or need to animate a large number then JavaScript will be the best option.
In the [hopefully near] future when attr and calc are fully supported, we'll be able to accomplish this without JavaScript.
HTML:
<ul class="something">
<li data-animation-offset="1.0">asdf</li>
<li data-animation-offset="1.3">asdf</li>
<li data-animation-offset="1.1">asdf</li>
<li data-animation-offset="1.2">asdf</li>
</ul>
CSS:
.something > li
{
animation: myAnimation 1s ease calc(0.5s * attr(data-animation-offset number 1));
}
This would create an effect where each list item animates in what would appear to be random order.
You can also make use of the transition-delay property in CSS and use JS or JQuery to assign a different delay for each child element . ( Assume s to be the starting delay in seconds )
$(".myClass img").each(function(index){
$(this).css({
'transition-delay' : s*(1+index) + 's'
});
});
So, the children will have the transition delays like 1*s, 2*s, 3*s ..... and so on. Now to create the actual animation effect simply set the required transition and the children will be animated in a sequence. Works like a charm !
If you have a lot of items (for example: I have paginated table with >1000 items and wanna each row to be animated with delay when page is loads), you can use jQuery to solve this and avoid css file rising in size. Animation delay dynamically increases.
$.each($('.myClass'), function(i, el){
$(el).css({'opacity':0});
setTimeout(function(){
$(el).animate({
'opacity':1.0
}, 450);
},500 + ( i * 500 ));
});
EDIT:
Here is the same code I adjusted to use with animate.css (install additional plugin before use https://gist.github.com/1438179 )
$.each($(".myClass"), function(i, el){
$(el).css("opacity","0");
setTimeout(function(){
$(el).animateCSS("fadeIn","400");
},500 + ( i * 500 ));
});
Where "fadeIn" is animation type, "400" - animation execute time, 500 - delay for each element on page to be animated.
Like this:
.myClass img {
-webkit-animation: myAnimation 0.9s linear forwards;
}
.myClass img:nth-child(1){
-webkit-animation-delay: 0.1s;
}
.myClass img:nth-child(2){
-webkit-animation-delay: 0.2s;
}
[...etc...]
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>
The desired effect is working in Firefox and Chrome, but not Safari.
The Animation is to behave as follows:
Pan Immediately to the left
Zoom in
Slowly Pan to the right
Zoom out
These all work fine except that in Safari, there is no Zooming Out.
I can't for the life of me figure out why.
Please, any help is appreciated.
#frame {
position:relative;
width:660px;
margin:5% auto 0;
height:177px;
border:1px solid #999;
overflow:hidden;
-webkit-transform:scale(.5);
}
.paper {
position:absolute;
top:0;
left:0;
width:660px;
height:177px;
}
.scribble {
position:absolute;
top:0;
left:0;
width:0;
height:177px;
}
.green {
background:url(scribble1.png) no-repeat 0 0;
top:0;
}
.red {
background:url(scribble2.png) no-repeat 0 0;
top:45px;
}
.blue {
background:url(scribble3.png) no-repeat 0 0;
top:82px;
}
/*
* Add Zoom-in Routine
*
*/
#-webkit-keyframes zoomin {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(2);
}
}
/*
* Add Zoom-out Routine
*
*/
#-webkit-keyframes zoomout {
0% {
-webkit-transform: scale(2);
}
100% {
-webkit-transform: scale(1);
}
}
/*
* Add Pan Routine
*
*/
#-webkit-keyframes pan {
0% {
left:660px;
}
50% {
left:-80px;
}
100% {
left:0;
}
}
/*
* Add Draw Routine
*
*/
#-webkit-keyframes draw {
0% {
width:0;
}
100% {
width:660px;
}
}
/*
* Begin Animation
*
*/
.paper {
-webkit-animation:
pan 10s ease-out,
zoomin 3s ease,
zoomout 5s 5s ease;
-webkit-animation-fill-mode:forwards;
}
.green {
-webkit-animation:draw 10s ease;
-webkit-animation-fill-mode:forwards;
}
.red {
-webkit-animation:draw 9s linear;
-webkit-animation-fill-mode:forwards;
}
.blue {
-webkit-animation:draw 8s ease-in-out;
-webkit-animation-delay:2s;
-webkit-animation-fill-mode:forwards;
}
<body>
<div id="frame">
<div class="paper">
<div class="scribble blue"></div>
<div class="scribble green"></div>
<div class="scribble red"></div>
</div>
</div>
</body>
</html>
The demonstration and live Code can be viewed at: http://blindmikey.com/dev/animation/scribbles2.php
I had a similar problem and found my answer here: Safari: Absolutely positioned DIVs not moving when updated via DOM
In short, set the transform style in a setTimeout() by itself for Safari 5.1
I have a div with an image in it. At the moment I use CSS3 animation to fade it off, but the performance is terrible.
I am pretty sure I should be using transitions. Problem is I cannot find one example that isn't triggered by a hover.
How can I make it so that when the page is loaded, after a delay of 2 seconds, the image/div fades in from 0%?
At the moment, as I said with animation, I have:
#-webkit-keyframes fadetime {
from {
opacity: 0;
}
50% {
opacity: 0;
}
to {
opacity: 1;
}
}
Any ideas? Thank you.
#-webkit-keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
.object {
-webkit-animation-name: FadeIn;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 3s;
}
Using jQuery is probably a better way to go:
<script type="text/javascript">
$(document).ready(function () {
$('#mainContent').hide();
$('#mainContent').delay(2000).fadeIn(500);
});
</script>
Where #mainContent is the div you want to fade in