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
Related
I had a vue list like below:
<div v-for="item in items">
<div class="animation">{{ item.name }}</div>
</div>
And my animation is
#keyframes loadingComment {
0% {
opacity: 0.6 !important;
}
99% {
opacity: 0.6 !important;
}
100% {
opacity: 1;
}
}
However when I add an animation to to item it starts the animation whenever the page loads even tho there are 0 items inside the array. I want the animation to play when the item is added to the items array. Any ideas? I assumed this is how it would work as default?
Thanks,
Jamie
first, you need to wrap your entire list section in a transition-group if you want to add animation to your list. Read more here
<transition-group name="list">
<div v-for="item in items" :key="item.id">
<div class="animation">{{ item.name }}</div>
</div>
</transition-group>
you need to specify a name for your transition. in that way you can control your animation style in CSS.<transition-group name="list">
If you only want to use fade animation you can use transitions for that. no need for keyframes.
something like this:
.list-enter-active, .list-leave-active {
opacity: 1;
transition: opacity .5s;
}
.list-enter, .list-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
but if you really want to use keyframes, in your example you can do something like this:
.list-enter-active, .list-leave-active {
animation: loadingComment 0.5s ease-in-out forwards;
}
#keyframes loadingComment {
0% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
also, you can see the result in this jsfiddle link jsfiddle demo
I have a small html like this:
h1:target {
animation: yellow-fading 0.8s linear;
}
#keyframes yellow-fading {
0% {
background-color: yellow;
}
100% {
background-color: transparent;
}
}
[Flash-title1] [Flash-title2]
<h1 id="title1">Title 1</h1>
<h1 id="title2">Title 2</h1>
My purpose is to do a background color flashing for the target I just clicked. It works(on Chrome 75), but with a flaw.
If I click [Flash-title1] twice in succession, the second click will not match the h1:target rule so the color flashing does not occur. How to solve this?
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 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.