I have created an animation for an element on my page and it always runs when the page is refreshed but i would like the animation to play when an element is clicked. How would i go about doing this?
CSS:
#login-or-signup-selection {
display: flex;
animation-name: test;
animation-duration: 5s;
position: relative;
height: 70%;
}
#keyframes test {
0% {top: 0px;}
50% {top:300px}
100% {top: 0;}
}
HTML:
<p id="clickMe">Element to click</p>
$('#clickMe').click(function () {
$(this).addClass('login-or-signup-selection');
$(this).on("animationend", function(event) {
$(this).removeClass('login-or-signup-selection')
});
});
.login-or-signup-selection {
display: flex;
animation-name: test;
animation-duration: 5s;
position: relative;
height: 70%;
}
#keyframes test {
0% {top: 0px;}
50% {top:300px}
100% {top: 0;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="clickMe">Element to click</p>
If you want only css and don't even care about js onclick events for now,
use the :active pseudo selector.
The only downside is that it only plays while (=during) e.g. the mouse button is down.
You would need some JavaScript for this.
First off, separate the CSS animation properties, and anything else related to your animation, and add them to their own class.
Next up, the JavaScript. You'll want to add an event listener to your element to add the animation class when clicked, and a timeout to remove the class afterwards so it will animate when clicked again.
const yourElement = document.getElementById('clickMe');
yourElement.addEventListener('click', _=> {
yourElement.classList.add('animation-class');
setTimeout(
_=> yourElement.classList.remove('animation-class'),
5000
)
});
#clickMe {
display: flex;
position: relative;
height: 70%;
}
.animation-class {
animation-name: test;
animation-duration: 5s;
}
#keyframes test {
0% { top: 0px; }
50% { top: 300px; }
100% { top: 0; }
}
<p id="clickMe">Element to click</p>
You need JavaScript for this.
If you add an event listener on the p element to listen for a click, this can then add the animation name to the selection div.
But you need to also listen for the end of the animation, otherwise subsequent clicks will have no effect. On animation end this snippet removes the animation name.
Note also that in order to be absolutely sure that the first (onload) animation end is trapped, the first animation name is not set until the event listeners have been set up.
function init() {
const clickMe = document.querySelector('#clickMe');
const selection = document.querySelector('#login-or-signup-selection');
clickMe.addEventListener('click', function() {
selection.style.animationName = 'test';
});
selection.addEventListener('animationend', function() {
selection.style.animationName = '';
});
selection.style.animationName = 'test';
}
window.onload = init;
#login-or-signup-selection {
display: flex;
animation-duration: 5s;
animation-iteration-count: 1;
position: relative;
height: 70%;
}
#keyframes test {
0% {
top: 0px;
}
50% {
top: 300px
}
100% {
top: 0;
}
}
<p id="clickMe">Element to click</p>
<div id="login-or-signup-selection">Login or signup selection</div>
I have a tab and once I click it the tab fades in. The content gets loaded in with AJAX. After the animation is done I want to load in the content. Right now the content is loading in immediately when I click the button. I tried toggleClass with delay but it didn't work.
How can I delay the content from being loaded in?
This is the HTML :
$("#button-1").on("click", function() {
$(".hidden-content-1", 2000).toggleClass("show-hidden-content", 2000);
$(".main-page-content-1", 2000).toggleClass("hide-shown-content", 2000);
})
#modal-1 {
width: 33.33%;
height: 100vh;
background-color: green;
left: 0;
top: 0;
}
.modals {
transition-timing-function: ease-out;
transition-duration: 1000ms;
position: absolute;
}
.active {
width: 100vw !important;
height: 100vh !important;
}
.show-hidden-content {
display: block !important;
}
.hidden-content-1 {
display: none;
}
.hide-shown-content {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modal-1" class="modals">
<div class="hidden-content-1">
<h1> TEST </h1>
</div>
<div class="main-page-content-1">
<h1>TEST </h1>
</div>
<a id="button-1" href="template-parts/panel1.php"><input onclick="change1()" type="button" value="See More" id="button-text-1"></input>
</a>
</div>
It seems you are looking something like:
$('#button-1').on('click', function () {
setTimeout(() => {
$('.hidden-content-1').toggleClass('show-hidden-content');
$('.main-page-content-1').toggleClass('hide-shown-content');
}, 2000);
});
You might want to use animation-delay
#target {
animation: fade-in 250ms ease-out 1s 1 normal both running;
}
#keyframes fade-in {
0% {
opacity:0;
} 100% {
opacity:1;
}
}
I am new to animations in CSS and this is my code
#keyframes fadeOut{
0% {opacity: 1;}
100% {opacity: 0;}
}
I want the above code to take effect on #menu only no matter where it is called, For EG: It is called on a button click but only affects the #menu element. Somewhat like and doesn't do anything to the button
button:focus{animation-name: fadeOut;
animation-duration: 4s;}
#keyframes fadeOut{
#menu{0% {opacity: 1;}}
#menu{100% {opacity: 0;}}
}
But the above code is illegal in CSS and hence, I can't use it.
Is there any alternate way to do this.
Thanks in advance.
You can do that by using JavaScript:
Example 1
In this example, we add an event for each element, each event calls the animation function that styles the #menu element.
let menu = document.getElementById('menu');
let btn = document.querySelector('.btn');
let p = document.querySelector('.p');
let box = document.querySelector('.box');
function animateIt(){
menu.style.animation = 'fade 1s';
setTimeout(function(){
menu.style.animation = 'unset';
}, 1000);
}
btn.addEventListener('click', (e) => {
animateIt();
});
p.addEventListener('click', (e) => {
animateIt();
});
box.addEventListener('click', (e) => {
animateIt();
});
#menu {
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
opacity: 0;
}
.box {
background-color: blue;
color: #fafafa;
width: 200px;
}
#keyframes fade{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div id="menu"></div>
<button class="btn">Click</button>
<p class="p">Or Click Here</p>
<div class="box">Or Click Even Here</div>
Example 2
In this example, we simply add the elements that will have events that animates the #menu in an array of objects with the class name and the event listener for each one. Each element and it's event will basically call the animateIt() function that styles and animates the #menu.
All you have to do is to add a line for each element that will call the animation, including ONLY the class name, and the event that calls it.
// Get the #menu
let menu = document.getElementById('menu');
// Gather the elements in an array of objects including the class name and the event
let elements = [
{class: ".btn", evt: "click"},
{class: ".p", evt: "click"},
{class: ".box", evt: "mouseover"}
];
for(let i = 0; i < elements.length; i++){
// Get the element
let theTarget = document.querySelector(elements[i].class);
// Get the event
let targetEvt = elements[i].evt;
// Add event for each element to call the animation function
theTarget.addEventListener(targetEvt, (e) => {
animateIt();
});
}
// The animation function that styles (animate) the #menu
function animateIt(){
menu.style.animation = 'fade 1s';
setTimeout(function(){
menu.style.animation = 'unset';
}, 1000);
}
#menu {
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
opacity: 0;
}
.box {
background-color: blue;
color: #fafafa;
width: 200px;
}
#keyframes fade{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div id="menu"></div>
<button class="btn">Click Here</button>
<p class="p">Or Click Here</p>
<div class="box">Or Hover Here</div>
As i understood , you have to add the animation to your element Like :
/* The animation code */
#keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
In your case it will be :
#menu {
animation-name: fadeOut;
animation-duration: 4s;
}
You can change 4s to the duration you want.
I'm creating my test webpage and I ran into a problem, there are quite a few "answers" on my issue but none was I able to implement in my code. I know I have to use javascript but I was not able to get it working.
So, I need to run css animation of movement on chosen picture, when that picture is visible on screen when I scroll down to it. Basically like on this page: https://www.photoblog.com/
So I have this code in the html as for the picture:
<img class="movepic" src="pictures/test.jpg">
And then there is this simple code for the CSS movement:
.movepic {
position: relative;
animation-name: move;
animation-duration: 3s;
visibility: visible;
animation-fill-mode: forwards;
z-index:10;
}
#keyframes move {
0% { right:0px; top:150px;}
100% {right:700px; top:150px;}
}
Is there a way to make it work so I do not need to completely redo this? Or if so, could some please give me a advice how to do it maybe with code ilustration.
Thanks a lot
I use this code for this effect:
HTML:
<img class="movepic" src="pictures/test.jpg">
CSS:
.movepic {
opacity: 0;
margin: 25px 0 0;
color: white;
padding: 10px;
}
.FadeIn {
-webkit-animation: slideIn 0.8s ease 0.3s forwards;
animation: slideIn 0.8s ease 0.3s forwards;
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
JQuery:
var $fade = $(".movepic"); //Calling the class in HTML
$(window).scroll(function () { //Using the scroll global variable
$fade.each(function () {
fadeMiddle = $(this).offset().top + (0.4 *$(this).height());
windowBottom = $(window).scrollTop() + $(window).height();
if (fadeMiddle < windowBottom) {
$(this).addClass("FadeIn");
}
});
});
/* On Load: Trigger Scroll Once*/
$(window).scroll();
Remove the animation-name from your style rule:
.movepic {
position: relative;
animation-duration: 3s;
animation-fill-mode: forwards
visibility: visible;
z-index:10;
}
and add this class to stylesheet:
.animation-class {
animation-name: move
}
Now add the jQuery:
var has_fired;
$("html").on("scroll", function () {
if (!has_fired && $(this).scrollTop() >= $("#imgContainer").offset().top) {
$("#imgContainer").addClass("animation-class");
has_fired = true; // use this if only want fired once
}
});
The animation will now run. BTW I would add an ID (imgContainer) to your container of interest and use this as selector for matching because unless .movepic is a unique class, this function will fire for any container with the .movepic class (if .movepic is the selector).
The <blink> tag was never an official standard, and is now completely abandoned by all browsers.
Is there a standards compliant way of making text blink?
.blink_text
{
animation:1s blinker linear infinite;
-webkit-animation:1s blinker linear infinite;
-moz-animation:1s blinker linear infinite;
color: red;
}
#-moz-keyframes blinker
{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#-webkit-keyframes blinker
{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes blinker
{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
<span class="blink_text">India's Largest portal</span>
No there is not. Wikipedia has a nice article about this and provides an alternative using JavaScript and CSS: http://en.wikipedia.org/wiki/Blink_element
No, there isn't in HTML. There is a good reason why the developers chose to go out of their way to remove support for an element whose implementation was otherwise untouched for upwards of a decade.
That said... you could emulate it using a CSS animation, but if I were you, I wouldn't risk CSS animations being axed due to being abused in this manner :)
Please try this one and I guarantee that it will work
<script type="text/javascript">
function blink() {
var blinks = document.getElementsByTagName('blink');
for (var i = blinks.length - 1; i >= 0; i--) {
var s = blinks[i];
s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
}
window.setTimeout(blink, 1000);
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
else if (window.addEventListener) window.addEventListener("load", blink, false);
else if (window.attachEvent) window.attachEvent("onload", blink);
else window.onload = blink;
Then put this below:
<blink><center> Your text here </blink></div>
The blink element is being abandoned by browsers: Firefox supported it up to version 22, and Opera up to version 12.
The HTML5 CR, which is the first draft specification that mentions blink, declares it as “obsolete” but describes (in the Rendering section) its “expected rendering” with the rule
blink { text-decoration: blink; }
and recommends that the element be replaced by the use of CSS. There are actually several alternative ways of emulating blink in CSS and JavaScript, but the rule mentioned is the most straightforward one: the value blink for text-decoration was defined specifically to provide a CSS counterpart to the blink element. However, support to it seems to be as limited as for the blink element.
If you really want to make content blink in a cross-browser way, you can use e.g. simple JavaScript code that changes content to invisible, back to visible etc. in a timed manner. For better results you could use CSS animations, with somewhat more limited browser support.
You could take advantage of JavaScript's setInterval function:
const spanEl = document.querySelector('#spanEl');
var interval = setInterval(function() {
spanEl.style.visibility = spanEl.style.visibility === "hidden" ? 'visible' : 'hidden';
}, 250);
<span id="spanEl">This text will blink!</span>
Blinking text with HTML and CSS only
<span class="blinking">I am blinking!!!</span>
And Now CSS code
.blinking{
animation:blinkingText 0.8s infinite;
}
#keyframes blinkingText{
0%{ color: #000; }
49%{ color: transparent; }
50%{ color: transparent; }
99%{ color:transparent; }
100%{ color: #000; }
}
The blick tag is deprecated, and the effect is kind of old :) Current browsers don't support it anymore. Anyway, if you need the blinking effect, you should use javascript or CSS solutions.
CSS Solution
blink {
animation: blinker 0.6s linear infinite;
color: #1c87c9;
}
#keyframes blinker {
50% { opacity: 0; }
}
.blink-one {
animation: blinker-one 1s linear infinite;
}
#keyframes blinker-one {
0% { opacity: 0; }
}
.blink-two {
animation: blinker-two 1.4s linear infinite;
}
#keyframes blinker-two {
100% { opacity: 0; }
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3>
<blink>Blinking text</blink>
</h3>
<span class="blink-one">CSS blinking effect for opacity starting with 0%</span>
<p class="blink-two">CSS blinking effect for opacity starting with 100%</p>
</body>
</html>
sourse: HTML blink Tag
If you're looking to re-enable the blink tag for your own browsing, you can install this simple Chrome extension I wrote: https://github.com/etlovett/Blink-Tag-Enabler-Chrome-Extension. It just hides and shows all <blink> tags on every page using setInterval.
HTML Code
<span class="blinking">Am I blinking?</span>
CSS code
.blinking{
animation:blinkingText 1.2s infinite;
}
#keyframes blinkingText{
0%{ color: #000; }
49%{ color: #000; }
60%{ color: transparent; }
99%{ color:transparent; }
100%{ color: #000; }
}
<span class="blinking">Am I blinking?</span>
Ref:https://html-online.com/articles/blinking-text-css-animation/
A small javascript snippet to mimic the blink , no need of css even
<span id="lastDateBlinker">
Last Date for Participation : 30th July 2014
</span>
<script type="text/javascript">
function blinkLastDateSpan() {
if ($("#lastDateBlinker").css("visibility").toUpperCase() == "HIDDEN") {
$("#lastDateBlinker").css("visibility", "visible");
setTimeout(blinkLastDateSpan, 200);
} else {
$("#lastDateBlinker").css("visibility", "hidden");
setTimeout(blinkLastDateSpan, 200);
}
}
blinkLastDateSpan();
</script>
The solution below is interesting because it can be applied across multiple elements concomitantly and does not trigger an error when the element no longer exists on the page. The secret is that it is called passing as a parameter a function in which you must return the elements you want to be affected by the blink. Then this function is called back with each blink. HTML file below:
<!doctype>
<html>
<head>
<style>
.blink {color: red}
</style>
</head>
<body>
<h1>Blink test</h1>
<p>
Brazil elected President <span class="blink">Bolsonaro</span> because he
was the only candidate who did not promise <span class="blink">free things</span>
to the population. Previous politicians created an image that would
bring many benefits, but in the end, the state has been getting more and
more <span class="blink">burdened</span>. Brazil voted for the
realistic idea that <span class="blink">there is no free lunch</span>.
</p>
</body>
<script>
var blink =
{
interval_in_miliseconds:
400,
on:
true,
function_wich_returns_the_elements:
[],
activate:
function(function_wich_returns_the_elements)
{
this.function_wich_returns_the_elements = function_wich_returns_the_elements;
setInterval(blink.change, blink.interval_in_miliseconds);
},
change:
function()
{
blink.on = !blink.on;
var i, elements = [];
for (i in blink.function_wich_returns_the_elements)
{
elements = elements.concat(blink.function_wich_returns_the_elements[i]());
}
for (i in elements)
{
if (elements[i])
{
elements[i].style.opacity = blink.on ? 1 : .2;
}
}
}
};
blink.activate
(
[
function()
{
var
i,
node_collection = document.getElementsByClassName('blink'),
elements = [];
for (i = 0; i < node_collection.length; i++)
{
elements.push(node_collection[i]);
}
return elements;
}
]
);
</script>
</html>
can use this
#keyframes blinkingText
{
0%{ opacity: 1; }
40%{ opacity: 0; }
60%{ opacity: 0; }
100%{ opacity: 1; }
}
.blinking
{
animation:blinkingText 2s reverse infinite;
}
Here's some code that'll substitute for the blink tag
<p id="blink">This text will blink!</p>
<script>
var blacktime = 1000;
var whitetime = 1000;
//These can be as long as you desire in milliseconds
setTimeout(whiteFunc,blacktime);
function whiteFunc(){
document.getElementById("blink").style.color = "white";
setTimeout(blackFunc,whitetime);
}
function blackFunc(){
document.getElementById("blink").style.color = "black";
setTimeout(whiteFunc,blacktime);
}
</script>