Update
Adding a delay solved my problem:
setTimeout(() => price.classList.add("fade-it"), 100);
but this answer also worked for me
Original question
I have a fade-in effect on background color that should be repeated from time to time initiated by me.
I'm using pure CSS:
<style>
#-webkit-keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
#-moz-keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
#keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
.fade-it {
-webkit-animation: yellow-fade 1s ease-in-out 0s;
-moz-animation: yellow-fade 1s ease-in-out 0s;
-o-animation: yellow-fade 1s ease-in-out 0s;
animation: yellow-fade 1s ease-in-out 0s;
}
</style>
How do I restart this effect after it's already played once?
The code I have is not working after the first time:
var price = document.getElementById("price");
if (price.classList.contains("fade-it")) {
price.classList.remove("fade-it");
}
price.classList.add("fade-it");
You can accomplish this by removing the node from the DOM then adding it back. The append function does exactly that, just append the element to it's parentNode. Give the element it's own wrapper to be the parentNode that way it will not be reordered with other sibling-elements.
const price = document.getElementById("price");
const btn = document.getElementById("fade-price");
const fade = function() {
if (price.classList.contains("fade-it")) {
price.classList.remove("fade-it");
}
price.classList.add("fade-it");
}
document.addEventListener("DOMContentLoaded", function() {
fade()
});
btn.addEventListener("click", function() {
price.parentElement.append(price)
});
#-webkit-keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
#-moz-keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
#keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
.fade-it {
-webkit-animation: yellow-fade 1s ease-in-out 0s;
-moz-animation: yellow-fade 1s ease-in-out 0s;
-o-animation: yellow-fade 1s ease-in-out 0s;
animation: yellow-fade 1s ease-in-out 0s;
}
<div>
<h4 id="price">$9.99</h4>
</div>
<button id="fade-price">
fade
</button>
Related
When I click on a button I want my div to animate. It seems only the show animation is working, but not the hide. The hide animation doesn't work at all even though the attribute values change.
$("#divShow").click(function() {
$('.parent').attr('isopen', 'true');
});
$("#divHide").click(function() {
$('.parent').attr('isopen', 'false');
});
.parent {
display: none; //hidden by default
width: 40px;
height: 40px;
background: blue;
}
#keyframes show {
50% {
transform: scale(1.03);
}
}
#keyframes hide {
50% {
transform: scale(0.97);
}
100% {
opacity: 0;
transform: scale(0.90);
}
}
[isopen="true"] {
display: block;
-webkit-animation: show .3s;
-moz-animation: show .3s;
-ms-animation: show .3s;
animation: show .3s;
}
[isopen="false"] {
-webkit-animation: hide .3s;
-moz-animation: hide .3s;
-ms-animation: hide .3s;
animation: hide .3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="divShow">Show</button>
<button id="divHide">Hide</button>
<div class="parent">
</div>
I think I got it working as you wanted. See here code snippet below.
Your show class has display block but when you remove it it gets right back to none. Just add the display none at the end of your hide animation.
Like this:
#keyframes hide {
50% {
transform: scale(0.97);
}
100% {
opacity: 0;
transform: scale(0.90);
display: none;
}
}
[isopen="false"] {
display: block;
animation: hide .3s forwards;
}
Code snippet:
$("#divShow").click(function() {
$('.parent').attr('isopen', 'true');
});
$("#divHide").click(function() {
$('.parent').attr('isopen', 'false');
});
.parent {
display: none; //hidden by default
width: 40px;
height: 40px;
background: blue;
}
#keyframes show {
50% {
transform: scale(1.03);
}
}
#keyframes hide {
50% {
transform: scale(0.97);
}
100% {
opacity: 0;
transform: scale(0.90);
display: none;
}
}
[isopen="true"] {
display: block;
-webkit-animation: show .3s;
-moz-animation: show .3s;
-ms-animation: show .3s;
animation: show .3s;
}
[isopen="false"] {
display: block;
-webkit-animation: hide .3s forwards;
-moz-animation: hide .3s forwards;
-ms-animation: hide .3s forwards;
animation: hide .3s forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="divShow">Show</button>
<button id="divHide">Hide</button>
<div class="parent">
</div>
With the help of this answer: https://stackoverflow.com/a/15407098/2181514
you can add forwards to your animations so that they keep the last (100%) keyframe.
Add display:block to [isopen=false] to ensure it doesn't hide immediately then:
animation: hide .3s forwards;
Updated snippet:
$("#divShow").click(function() {
$('.parent').attr('isopen', 'true');
});
$("#divHide").click(function() {
$('.parent').attr('isopen', 'false');
});
.parent {
display: none;
width: 40px;
height: 40px;
background: blue;
}
#keyframes show {
50% {
transform: scale(1.03);
}
}
#keyframes hide {
50% {
transform: scale(0.97);
}
100% {
opacity: 0;
transform: scale(0.90);
}
}
[isopen="true"] {
display: block;
-webkit-animation: show .3s;
-moz-animation: show .3s;
-ms-animation: show .3s;
animation: show .3s;
}
[isopen="false"] {
display: block;
-webkit-animation: hide .3s forwards;
-moz-animation: hide .3s forwards;
-ms-animation: hide .3s forwards;
animation: hide .3s forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="divShow">Show</button>
<button id="divHide">Hide</button>
<div class="parent">
</div>
Can be done simply, efficiently with less line of code using transition
$("#divShow").click(function() {
$('.parent').addClass('show');
});
$("#divHide").click(function() {
$('.parent').removeClass('show');
});
.parent {
width: 40px;
height: 40px;background: blue;
transform: scale(0.97);
transition: all 0.3s;
opacity:0;
}
.show {
opacity:1;
transform: scale(1.03);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="divShow">Show</button>
<button id="divHide">Hide</button>
<div class="parent">
</div>
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
I am new using javascript and CSS and am currently trying to make a small animation that is triggered at event call. The animation is simple, and only changes the transparancy of an image. My problem is that that the animation only works every other time the function is called.
A function called "pulse()" is called every time I want the animation to happen.
<script>
function pulse() {
$('.transform').toggleClass('transform-active');
}
</script>
The CSS looks like this:
.lock-image {
}
.transform {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.transform-active {
/*animation-delay: 2s;*/
animation-iteration-count: 1;
animation: pulse 0.5s;
animation-direction: alternate;
}
#keyframes pulse {
0% {
opacity: 1;
}
50%{
opacity: 0.3;
}
100% {
opacity: 1;
}
}
The image on which the animation is done is done like this;
<div class="lock-image transform">
<img id="myImage" src="pic_locked.png" class="img-responsive " style="display:inline" alt="Lock" width="100" height="80">
</div>
How can I change the code so the animation happens every time the function pulse() is called?
You can add an event handler to handle when the animation ends to remove the class. For the purpose of the example, I've changed the image to a red div
function pulse() {
$('.transform').addClass('transform-active');
}
$('.transform').on('webkitAnimationEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
$(this).removeClass('transform-active');
})
#myImage {
display: block;
background-color: red;
width: 100px;
height: 80px;
}
.transform {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.transform-active {
/*animation-delay: 2s;*/
animation-iteration-count: 1;
animation: pulse 0.5s;
animation-direction: alternate;
}
#keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lock-image transform">
<div id="myImage"></div>
</div>
<br/>
<button type="button" onclick="pulse()">Pulse</button>
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>
Is it possible to make a pulsating text effect where given a string of text "Hello World", every few seconds it eases from green to blue, then blue to green, green to blue, blue to green without a single line of javascript? (does there happen to be any SCSS or SASS shortcuts?)
Here's the CSS3 for what you want:
.textClass {
-webkit-animation: color_change 1s infinite alternate;
-moz-animation: color_change 1s infinite alternate;
-ms-animation: color_change 1s infinite alternate;
-o-animation: color_change 1s infinite alternate;
animation: color_change 1s infinite alternate;
}
#-webkit-keyframes color_change {
from { color: blue; }
to { color: green; }
}
#-moz-keyframes color_change {
from { color: blue; }
to { color: green; }
}
#-ms-keyframes color_change {
from { color: blue; }
to { color: green; }
}
#-o-keyframes color_change {
from { color: blue; }
to { color: green; }
}
#keyframes color_change {
from { color: blue; }
to { color: green; }
}
<p class="textClass">Hello World</p>
Read: http://tjvantoll.com/2012/02/20/CSS3-Color-Animations/ for more info
Yep:
#keyframes textColorChange {
0% {color: #0000ff;}
50% {color: #00ff00;}
100% {color: #0000ff;}
}
/* Use #-webkit-keyframes for Safari/Chrome */
#textElement {
animation: textColorChange 2s infinite;
}
/* Use -webkit-animation for Safari/Chrome */
Try this :
CSS:
#-webkit-keyframes altrclr{
0%{
color:red;
}
50%{
color:green;
}
}
#a{
margin:40%;
font-size:20px;
color:red;
-webkit-animation: altrclr 3s infinite alternate;
-webkit-transform:scale(4);
}
Html
<div id='a'>
Hello World
</div>
Demo