I'm trying to create a simple 3 image slide show by swapping the z-index of the 3 images. I'm giving each of them 4 seconds of time before the next image swaps in. It works fine for the first cycle, but there after the first image doesn't show up anymore.
<html>
<head>
<style>
.HPLIMG1 {
z-index: 0;
animation: move 4s linear 0s infinite alternate;
}
#keyframes move {
from { z-index: 100; }
to { z-index: 400; }
}
.HPLIMG2 {
z-index: 0;
animation: move1 4s linear 4s infinite alternate;
}
#keyframes move1 {
from { z-index: 100; }
to { z-index: 400; }
}
.HPLIMG3 {
z-index: 0;
animation: move2 4s linear 8s infinite alternate;
}
#keyframes move2 {
from { z-index: 100; }
to { z-index: 400; }
}
</style>
</head>
</body>
<div>
<img src="1.png" class="HPLIMG1" style="position:relative"/>
<img src="2.png" class="HPLIMG2" style="position:relative; left:-200px; margin-right:-200px"/>
<img src="3.png" class="HPLIMG3" style="position:relative; left:-200px; margin-right:-200px"/>
</div>
</body>
</html>
As you can see, I'm trying to stagger the start time of each animation by 4 seconds. I've come to realize that this is likely a timing (frequency) issue because it takes 4 seconds to switch z index, but then another 4 to switch it back. So now I'm wondering if there is a way to animate it slowly in one direction, and then quickly the other? Is there possibly a better solution such as having one animation trigger another or using transitions (not sure if transitions can be time triggered rather than event triggered) .
I'm completely new to CSS, and I haven't been able to find an answer to this in any of the other posts.
Related
I am trying to make an animated loading text. But here my duration property is not working.
Here is the html code:
<div id="Text">
Loading<span class="l1">.</span><span class="l2">.</span><span class="l3">.</span>
</div>
Here is the CSS code:
.l1{
visibility:hidden ;
color:red;
animation-name:dots;
animation-duration:1s;
animation-iteration-count:infinite ;
animation-delay:0.5s;
}
.l2{
visibility:hidden ;
color:red;
animation-name:dots;
animation-duration:2s;
animation-iteration-count:infinite ;
animation-delay:1s;
}
.l3{
visibility:hidden ;
color:red;
animation-name:dots;
animation-duration:3s;
animation-iteration-count:infinite ;
animation-delay:1.5s;
}
#keyframes dots{
from{visibility:hidden ;}
to{visibility:visible ;}
}
But the duration property is not working. The three dots are appearing one after another, but they stay constantly visible after appearing all the three dots.
But I want to make the all the three dots disappear again after appearing and to repeat it infinite time.
Thank you
.l1, .l2, .l3{
display:inline-block ;
opacity: 0;
color:red;
animation:dots 1.5s infinite ease;
animation-fill-mode: forwards;
}
.l1{
animation-delay:0.5s;
}
.l2{
animation-delay:1s;
}
.l3{
animation-delay:1.5s;
}
#keyframes dots{
0%{opacity:1 ;}
100%{opacity:0 ;}
}
<div id="Text">
Loading<span class="l1">.</span><span class="l2">.</span><span class="l3">.</span>
</div>
Instead of animating visibility, use opacity from opacity: 0 to opacity: 1
Remove visibility:hidden from all li classes
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 am attempting to use the Animate.css library to achieve the following: Fading the "Simply Reiki" logo together with a string of successive <p> elements. Each<p> will need to fade in and out, one after the other.
The page in question can be viewed at Simply Reiki test page
OBSERVATIONS
Obviously, "animation-delay" does not function. Each<p> element immediately overlaps the others.
It does not seem that "both" will work on the
fadeIn and perform the fade out.
Here are code snippets for my HTML and CSS:
h1.animated {
font-size: 5.5em;
font-weight: normal;
font-family: 'Allura', cursive;
color: #e8e8ea;
margin: auto;
position: absolute;
z-index: 1;
animation: fadeIn forwards 7s 0.5s;
opacity: 0;
}
p.animated {
font-size: 1.5em;
font-family: 'Muli', cursive;
color: #e8e8ea;
margin: auto;
position: absolute;
top: 105px;
left: 45px;
z-index: 1;
opacity: 0;
}
p.animated1 {
animation: fadeIn both 7s;
}
p.animated2 {
animation-delay: 14s;
animation: fadeIn both 7s;
}
p.animated3 {
animation-delay: 21s;
animation: fadeIn both 7s;
}
<div class="hero-text-wrapper">
<h1 class="animated">Simply Reiki</h1>
<p class="animated animated1">Pure · Positive · Powerful</p>
<p class="animated animated2">Just for today, I will not be angry.</p>
<br>
<p class="animated animated3">Just for today, I will not worry.</p>
<br>
<p class="animated animated4">Just for today, I will be grateful.</p>
<br>
<p class="animated animated5">Just for today, I will do my work honestly.</p>
<br>
<p class="animated animated6">Just for today, I will be kind to every living thing.</p>
</div>
use javascript with like this
.quotes {display: none;}
<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>
// code gets installed at the end of the body (after all other HTML)
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
See also Working demo:
http://fiddle.jshell.net/jfriend00/n4mKw/show/
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 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.