After sliding in next flexslider slide, css animation is not working - javascript

In every flexslider list I have a div which is named class="txt",
and so I need to animate this txt class in every flexslider's list example :
<div class='flexslider'>
<ul>
<li><div class="txt">lorem ipsum</div></li>
<li><div class="txt">lorem ipsum</div></li>
<li><div class="txt">lorem ipsum</div></li>
</ul>
</div>
But only the first class="txt" in list of flexslider is animating by css below, others in list whenever I click next are not getting the animation, what should i do ?
Here is the animation code I'm using for txt class :
-webkit-animation: aniload 1s;
-moz-animation: aniload 1s;
-ms-animation: aniload 1s;
-o-animation: aniload 1s;
animation: aniload 1s;
#-webkit-keyframes aniload {
from {-webkit-transform:translate(0px, 1000px)}
to {-webkit-transform:translate(0px, 0px)}
}

You can delay your other animations http://jsfiddle.net/o3yftL2o/2/
.txt_a{
-webkit-animation: aniload 1s;
-moz-animation: aniload 1s;
-ms-animation: aniload 1s;
-o-animation: aniload 1s;
animation: aniload 1s;
-webkit-animation-delay:1s;
}
#-webkit-keyframes aniload {
0% {-webkit-transform:translate(0px, 1000px)}
100% {-webkit-transform:translate(0px, 0px)}
}
.txt_b{
-webkit-animation: aniload2 1s;
-moz-animation: aniload2 1s;
-ms-animation: aniload2 1s;
-o-animation: aniload2 1s;
animation: aniload2 1s;
-webkit-animation-delay:.5s;
}
#-webkit-keyframes aniload2 {
from {-webkit-transform:translate(0px, 1000px)}
to {-webkit-transform:translate(0px, 0px)}
}
.txt_c{
-webkit-animation: aniload3 1s;
-moz-animation: aniload3 1s;
-ms-animation: aniload3 1s;
-o-animation: aniload3 1s;
animation: aniload3 1s;
-webkit-animation-delay:0s;
}
#-webkit-keyframes aniload3 {
from {-webkit-transform:translate(0px, 1000px)}
to {-webkit-transform:translate(0px, 0px)}
}

Related

Reverse animations aren't working properly with javascript and keyframes

I'm trying to animate the navigation overlay to come in from the right (which is working perfectly!), but it's not working when I try to reverse the process. I'm wondering why. Please review the code below and see if you can help me.
HTML
<nav class="nav-element">
<h1>header</h1>
<figure class="nav-img">
<img src="images/svg/menu.svg" alt="Hamburger Menu" id="nav-open">
</figure>
</nav>
<section id="overlay" class="overlay">
<header>
<h1>Header</h1>
<figure class="nav-img">
<img src="images/svg/menu-close.svg" alt="Close Menu" id="nav-close">
</figure>
</header>
<ul>
<li class="nav-button">item 1</li>
<li class="nav-button">item 2</li>
<li class="nav-button">item 3</li>
<li class="nav-button">item 4</li>
</ul>
</section>
SCSS
.show-menu {
display: block;
animation: slide-menu 0.5s ease-in forwards;
header {
animation: show-x 1s 0.5s forwards;
}
li:nth-of-type(1) {
animation: item-1 0.5s 0.5s linear forwards;
}
li:nth-of-type(2) {
animation: item-1 0.5s 0.7s linear forwards;
}
li:nth-of-type(3) {
animation: item-1 0.5s 0.9s linear forwards;
}
li:nth-of-type(4) {
animation: item-1 0.5s 1.1s linear forwards;
}
}
.hide-menu {
display: block;
animation: slide-menu 0.5s 1.1s ease-in forwards;
header {
animation: hide-x 1s 0.5s forwards;
}
li:nth-of-type(1) {
animation: item-hide 0.5s linear forwards;
}
li:nth-of-type(2) {
animation: item-hide 0.5s 0.9s linear forwards;
}
li:nth-of-type(3) {
animation: item-hide 0.5s 0.7s linear forwards;
}
li:nth-of-type(4) {
animation: item-hide 0.5s 0.5s linear forwards;
}
}
#keyframes slide-menu {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
#keyframes show-x {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes item-1 {
from {
transform: translateX(10%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
#keyframes hide-menu {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
#keyframes hide-x {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes item-hide {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(10%);
opacity: 0;
}
}
Javascript
const overlay = document.getElementById('overlay');
document.getElementById('nav-open').addEventListener('click', function() {
overlay.classList.add('show-menu');
})
document.getElementById('nav-close').addEventListener('click', function() {
overlay.classList.add('hide-menu');
overlay.classList.remove('show-menu');
})
Can anyone help me why the animation isn't "reversed" and the menu closes the same way it opens?
So first the items move on the X-axis and disappear, then the header content fades, and lastly the overlay moves from the X-axis and disappears.
Try this CSS for the .hide-menu, Adding the reverse property will reverse the animation when clicking the hide button:
.hide-menu {
display: block;
animation: slide-menu 0.5s 1.1s ease-in reverse;
header {
animation: hide-x 1s 0.5s reverse;
}
li:nth-of-type(1) {
animation: item-hide 0.5s linear reverse;
}
li:nth-of-type(2) {
animation: item-hide 0.5s 0.9s linear reverse;
}
li:nth-of-type(3) {
animation: item-hide 0.5s 0.7s linear reverse;
}
li:nth-of-type(4) {
animation: item-hide 0.5s 0.5s linear reverse;
}
}
Heres a JSFiddle Example

Javascript Event Listner Issue

The console in the Chrome developer tools shows no errors, the div loads, but the animation play state remains paused - what am I doing wrong?
document.getElementById("design").addEventListener("webkitAnimationEnd", animation);
function animation(){
"use strict";
document.getElementById("profile").classList.add("animation");
location.href = "#profile";
}
CSS
#design {
position: relative;
-webkit-animation: mixdesign;
-webkit-animation-play-state: running;
-webkit-animation-duration: 30s;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
z-index: 8;
}
/* Profile */
#profile {
position: relative;
-webkit-animation: profile;
-webkit-animation-duration: 30s;
-webkit-animation-play-state: paused;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
.animation { -webkit-animation-play-state: running; }
As you were assigning class once transition ends, the existing class css property that takes priority over.
You can make it override them using the !important keyword.
Fiddle here
document.getElementById("design").addEventListener("webkitAnimationEnd", animation);
function animation() {
"use strict";
document.getElementById("profile").classList.add("animation");
}
#design {
position: relative;
-webkit-animation: design;
-webkit-animation-play-state: running;
-webkit-animation-duration: 3s;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
z-index: 8;
}
/* Profile */
#profile {
position: relative;
-webkit-animation: profile;
-webkit-animation-duration: 3s;
-webkit-animation-play-state: paused;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
.animation {
-webkit-animation-play-state: running!important;
}
#-webkit-keyframes design {
10%, 90% {
-webkit-opacity: 1;
}
0%,
100% {
-webkit-opacity: 0;
}
}
/* Profile: (Animation) */
#-webkit-keyframes profile {
10%, 90% {
-webkit-opacity: 1;
}
0%,
100% {
-webkit-opacity: 0;
}
}
<div id="design">Design</div>
<div id="profile">profile</div>

css3 animation delay between keyframe?

.blink_me {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
}
<span class="blink_me">This Will Blink</span>
I added -webkit-animation-delay: 2s; but the delay triggered at the beginning not at between, how can I make delay happens in between so that the blinking speed is slower?
You can just extend the time and make the animation run faster by making it finish before 100%. You get the idea, so just work out the timing you want.
.blink_me {
-webkit-animation-name: blinker;
-webkit-animation-duration: 2s;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#-webkit-keyframes blinker {
0% {
opacity: 1.0;
}
25% {
opacity: 0.0;
}
50% {
opacity: 1.0;
}
}
<span class="blink_me">This Will Blink</span>
try adjusting the animation loop like this:
.blink_me {
-webkit-animation-name: blinker;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
25% { opacity: 1.0; }
50% { opacity: 0.0; }
75% { opacity: 0.0; }
100% { opacity: 1.0; }
}
}
<span class="blink_me">This Will Blink</span>

div hide and show in loop

How can I create a Road divider animation with one animating after another immediately? please find the following link for issue example
http://jsfiddle.net/shantnuraj/36XeK/1/
HTML:
<div id="tech-slideshow">
<div id="tech-slideshow-1" class="tech-slideshow-1">dfsd</div>
<div id="tech-slideshow-2" class="tech-slideshow-1">dfs</div>
<div id="tech-slideshow-3" class="tech-slideshow-1">dfsd</div>
<div id="tech-slideshow-4" class="tech-slideshow-1">dfs</div>
<div id="tech-slideshow-5" class="tech-slideshow-1">fsd</div>
<div id="tech-slideshow-6" class="tech-slideshow-1">dfs</div>
</div>
CSS:
.devider-marque img.devider {
margin-top: 0px;
}
#tech-slideshow {
height: 500px;
position: absolute;
overflow: hidden;
left: 50%;
width: 50px;
bottom: 0;
}
#tech-slideshow > div {
width: 50px;
background:#000;
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#tech-slideshow-1 {
margin-top: -200px;
-webkit-animation: moveSlideshow1 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-2 {
margin-top: -400px;
-webkit-animation: moveSlideshow2 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-3 {
margin-top: -600px;
-webkit-animation: moveSlideshow3 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-4 {
margin-top: -800px;
-webkit-animation: moveSlideshow4 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-5 {
margin-top: -1000px;
-webkit-animation: moveSlideshow5 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#tech-slideshow-6 {
margin-top: -1200px;
-webkit-animation: moveSlideshow6 5s linear infinite;
-moz-animation: moveSlideshow1 5s linear infinite;
}
#-moz-keyframes moveSlideshow1 {
0% {top:0; height:150px;}
10% {top:20;height:150px;}
100% {top:1200px;height:150px;}
}
#-webkit-keyframes moveSlideshow1 {
0% {top:0; height:150px;}
10% {top:20;height:150px;}
100% {top:1200px;height:150px;}
}
Hello Here is your answer with fiddle
use transition-delay instead of margin-top
#Anydiv {
animation-name: moveSlideshow1;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 1s; [ adding transition delay +1 to next div in loop will make it smoother ]
}
i have just edited fiddle in hurry so i have added animation parameter seperately you can use shorthand :)
Fiddle http://jsfiddle.net/krunalp1993/36XeK/4/
Hope it helps you :)
You can control the speed by setting animation time value.
-webkit-animation: moveSlideshow6 3s linear infinite;
-moz-animation: moveSlideshow1 3s linear infinite;

Is it possible to fade in newly created elements using only css3?

I am working with a chat script. I have no control over any javascript, only CSS. I was wondering if it is possible to get the posts to fade in, as they are added, with only CSS3.
Here is a simplified example of the chat script:
http://jsfiddle.net/CF4pj/1/
<a class="click" href="#/">click</a>
<div class="stuff"></div>
<script>
$("a.click").click(function() {
$("div.stuff").append("<div class='lol'>text text text text text</div>");
});
</script>
Is there any CSS3 (only CSS3, no javascript) I could add to the script above to make the new "posts" fade in?
Here you go...
div.click {
background:yellow;
display:inline;
}
div.lol {
padding:5px;
border:1px solid green;
margin:5px 0;
animation: fadein 2s;
-moz-animation: fadein 2s;
/* Firefox */
-webkit-animation: fadein 2s;
/* Safari and Chrome */
-o-animation: fadein 2s;
/* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
Check out this fiddle...jsfiddle
You could use something like this:
<code>
.lol {
opacity: 0;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}​
</code>

Categories