This question already has answers here:
Stopping a CSS3 Animation on last frame
(8 answers)
Closed 6 years ago.
I'm using css3 to animate some text. I'm just trying to fade it in, and then disappear only to do it again a few seconds later (after other animations). The problem i'm having is my text fades in but immediately disappears even though i have the keyframe finish # opacity:1; Why is my text disappearing? Here's the code:
<style>
#myArea {
height:250px;
width:300px;
position:relative;
overflow:hidden;
}
.text {
position:absolute;
z-index:1;
bottom:20px;
left:10px;
opacity:1;
}
#txt1 {
animation: txt1-fade 1s 1 ease-in;
animation-delay:1s;
}
#txt2 {
-webkit-animation: txt2-fade 5s infinite; /* Chrome, Safari, Opera */
animation: txt2-fade 5s infinite;
}
#txt3 {
-webkit-animation: txt3-fade 5s infinite; /* Chrome, Safari, Opera */
animation: txt3-fade 5s infinite;
}
#keyframes txt1-fade {
0% {opacity: 0; left:10px;}
100% {opacity: 1; left:10px;}
}
</style>
<body>
<div id="myArea">
<img src="images/backgrnd.jpg" />
<div id="txt1" class="text">
<img src="images/text1.png" />
</div>
<div id="txt2" class="text">
<img src="images/text2.png" />
</div>
<div id="txt3" class="text">
<img src="images/text3.png" />
</div>
</div>
By default elements return to their original state after an animation is completed. You can keep the state in which the element is in at end of animation by applying animation-fill-mode: forwards;
http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
Related
I'd like to animate a list of items. The first should animate with 0ms delay, the second should do the same animation with 50ms delay, third with 100ms delay and so on. The list is dynamic so I won't know the length.
Is this possible? Note: I don't need help with animations / keyframes specifically, but how to use nth-child or nth-of-type (or anything else?) to achieve a progressive animation delay based on relative position between siblings.
I'm using React / SASS / Webpack if that helps. I can use jQuery if necessary but I'd rather avoid it if possible.
Here's an example on how to do something like this with pure CSS.
You can easily alter it to bring it to your needs.
$(document).ready(function() {
$('.myList img').each(function(i){
var item = $(this);
setTimeout(function() {
item.toggleClass('animate');
}, 150*i);
})
});
#keyframes FadeIn {
0% {
opacity: 0;
transform: scale(.1);
}
85% {
opacity: 1;
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.myList img {
float: left;
margin: 5px;
visibility: hidden;
}
.myList img.animate {
visibility: visible;
animation: FadeIn 1s linear;
animation-fill-mode:both;
animation-delay: .5s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myList">
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
</div>
I just want to basically show text and hide, then next text and hide, then last text and hide and repeat. How can I do this? I've been looking at code but I'm still lost. Any help is greatly appreciated!
My Code :
<style>
#myArea {
height:250px;
width:300px;
position:relative;
}
.text {
position:absolute;
z-index:1;
bottom:20px;
left:10px;
}
</style>
<body>
<div id="myArea">
<img src="images/backgrnd.jpg" />
<div id="txt1" class="text">
<img src="images/text1.png" />
</div>
<div id="txt2" class="text">
<img src="images/text2.png" />
</div>
<div id="txt3" class="text">
<img src="images/text3.png" />
</div>
</div>
It is fairly simple to achieve the effect that you are looking for. All that is needed is for you to place the images absolutely on top of each other and then add an animation which changes the opacity of the image (or its container) accordingly.
The key parts when animating multiple elements in a loop are to
make sure that the animation of the second and subsequent elements start after all the previous elements have completed their animation and
make sure all the previous elements stay in the final state until the other elements complete their animation (otherwise they will mess up the animation).
The first part can be achieved by using progressive animation-delay on elements while the second part is achieved by setting the #keyframes accordingly. Here, since there are 3 images, animation of each of them should be completed at 33% mark itself (because during the other 66%, the other 2 will be executing their animation). The state as at 33% should be maintained till 100%.
(If you have 4 images, it should complete at 25% and so on.)
#myArea {
height: 250px;
width: 300px;
position: relative;
}
.text {
position: absolute;
z-index: 1;
bottom: 20px;
left: 10px;
opacity: 0;
animation: fade-in-out 9s ease backwards infinite 1s; /* initial delay is for image to load */
}
.text:nth-of-type(2) {
animation-delay: 4s; /* this must start after first has faded-out */
}
.text:nth-of-type(3) {
animation-delay: 7s; /* this must start after second has also faded-out */
}
#keyframes fade-in-out {
0% {
opacity: 0;
}
11%, 22% {
opacity: 1;
}
33%, 100% {
opacity: 0;
}
}
<div id="myArea">
<img src="http://lorempixel.com/300/250/abstract/2" />
<div id="txt1" class="text">
<img src="http://lorempixel.com/200/200/animals/1" />
</div>
<div id="txt2" class="text">
<img src="http://lorempixel.com/200/200/animals/2" />
</div>
<div id="txt3" class="text">
<img src="http://lorempixel.com/200/200/animals/3" />
</div>
</div>
Are you probably looking for the steps timing-function? It provides a gif-like way to animate an image set!
there is an example: https://jsfiddle.net/simurai/CGmCe/
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function
Hope it helps!
I am needing to fadeIn a list of text and then fade each one out individually using css. Here is an example I did using javascript. Any help would be appreciated. I have read some examples of how to animate stuff with css but do not know the best practices or anything to complex.
I am thinking I need to create a wrapper div with a overflow of hidden and a separate div with all the text that is position absolute in the wrapper. Then animate the .text div up or down to show the text. I have no experience with css animations.
Here is what I want to do but with css not javascript:
http://jsfiddle.net/trav5567/8ejqsywu/
Here is my javascript:
var quotes = $(".whoiam").find('h2');
var quoteIndex = -1;
quotes.hide();
function showNextQuote() {
++quoteIndex;
console.log(quoteIndex);
if(quoteIndex === quotes.length){
console.log($(this));
//console.log('index greater than or equal to h2 length');
//$(this).fadeIn('200');
}else{
console.log('Kepp going');
quotes.eq(quoteIndex % quotes.length)
.fadeIn(500)
.delay(500, checkIndex(quoteIndex,quotes.length))
.fadeOut(500, showNextQuote);
}
}showNextQuote();
function checkIndex(index, length){
var length = length-1
if(index === length){
console.log('check good');
end();
}
}
Here is my HTML:
<div id="splash-wrapper">
<div class="row">
<div class="small-12 columns">
<h1>Travis M. Heller</h1>
<div class='whoiam'>
<h2>Front End Developer</h2>
<h2>Illustrator</h2>
<h2>Web Master</h2>
<h2>Front End Developer</h2>//This value will be the last to show on loop.
</div>
<button class="btn center gotoPortfolio">ENTER</button>
</div>
</div>
</div>
An experiment with just css animations: http://jsfiddle.net/8ejqsywu/6/
There is one animation which moves the text list verticaly, and another which fades in and out the text. The difficulty was to synchronize them!
#container{
overflow:hidden;
height:48px;
}
.whoiam{
-webkit-animation: move;
position:relative;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: step-start;
-webkit-animation-delay: 0.5s
}
h2{ height:48px;margin:0;padding:0}
#-webkit-keyframes move {
0% { margin-top: 0em; }
25% { margin-top: -48px; }
50% {margin-top: -96px;}
75% {margin-top: -144px; }
100% {margin-top: 0;}
}
h2{
-webkit-animation: fade;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
I'm trying make images in a slideshow behave like links, so when user clicks on the image it will take them to that url.
The slideshow is made using css animations. It's based on this tutorial.
As you can see I already tried wrapping it in an tag but that doesn't work, I think the animation is affecting the images ability to work as a link...
My HTML
<div class="slideshow">
<figure>
<img src="c5.jpg" width="484" height="330" />
</figure>
<figure>
<img src="14.jpg" width="484" height="330" />
</figure>
<figure>
<img src="c3.jpg" width="484" height="330"/>
</figure>
<figure>
<img src="c2.jpg" width="484" height="330" />
</figure>
<figure>
<img src="12.png" width="484" height="330" />
</figure>
</div>
Some of my CSS:
.slideshow figure:nth-child(1) {
-webkit-animation: goldfade 20s 16s infinite;
-moz-animation: goldfade 20s 16s infinite;
-ms-animation: goldfade 20s 16s infinite;
animation: goldfade 20s 16s infinite;
}
.slideshow figure:nth-child(2) {
-webkit-animation: goldfade 20s 12s infinite;
-moz-animation: goldfade 20s 12s infinite;
-ms-animation: goldfade 20s 12s infinite;
animation: goldfade 20s 12s infinite;
}
#-webkit-keyframes "goldfade" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
18% {
filter: alpha(opacity=100);
opacity: 1;
}
20% {
filter: alpha(opacity=0);
opacity: 0;
}
96% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
change the href to the img's src property, if you're trying to open the image:
<a href="c13.jpg">
<img src="c13.jpg">
</a>
wrap the image tags with an anchor tag and provide the href attribute your desired link.Then your image will act like a link.That might serve your purpose
<a href='....your link...'>
<img src='imageName.png'>
</a>
I am seeking to do the same thing, but neither answer above seems to work. The example given above already has each <img> surrounded with an anchor. When I try wrapping each image with a unique anchor, only the last anchor defined works.
Add anchor tag in all slider_images for providing link:
<a href='link of page that you want to open'>
<img src='image.jpg'>
</a>
I know this question has been asked before but I can't get mine working. I have a javascript array in the head of my html document which makes the images change to the next one in the array, but I can't make transitions work. I've tried using css properties and I've very briefly tried jquery but as I haven't used jquery before I don't know how to do anything with it.
I have this for javascript:
<script type="text/javascript">
image2 =new Array("images/product1_thumb.png", "images/product2_thumb.png", "images/product3_thumb.png"
, "images/product4_thumb.png")
num =0;
imgNum =image2.length;
function rotate()
{
if(document.images)
{
if(num ==imgNum)
{
num = 0;
}
}
document.getElementById('image2').src = image2[num];
num++;
setTimeout("rotate()",4000);
}
</script>
This is the html:
<section id="right">
<img src="images/product1_thumb.png" ID="image2" alt="" title="" />
</section>
And this css is what I've used to try to make the transitions:
#image2{
margin-left:100px;
position:inherit;
-moz-transition: all 2s ease-in-out 2s;
-webkit-transition: all 2s ease-in-out 2s;
transition: all 2s ease-in-out 2s; /* opacity 5s ease-in-out; */
}
#right{
padding-top:10%;
margin-left:70%;
width:30%;
background-image:url('images/watermark50.png');
background-repeat:no-repeat;
background-position:center;
height:100%;
}
#right img{
margin-left: 30%;
}
I'd be grateful for any help but if it uses jquery you'd have to start at the beginning as I have no idea how it works.