Is it possible to access a specific moment in CSS animation? - javascript

I'm a frontend beginner studying Javascript and CSS animations.
I'm trying to make an element to blink according to a rythm (1 beat/second) and already synchronized the beat with the blink. I also would like to make this element to be clickable and act like a button to call a function when pressed. But this element must be clickable only in the beginning of the animation, when opacity is still >= 0.8.
I've tried to do that with visibility (hidden/visible), but it didn't work like I expected. So I'm trying it now with opacity.
Is it possible?
If I specify percentage (like 20%) to change opacity, what would be the syntax to access the percentage? element.style.opacity[??]
// Javascript code:
element.classList.add('blink');
// CSS code:
.blink {
animation-name: blink-animation;
animation-duration: 1000ms;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
#keyframes blink-animation {
from { opacity: 1; }
to { opacity: 0; }
}

If you want to do it in css use pointer-events: none to prevent users from interacting with your element. When the animation is at 20% the opacity will be 0.8;
#keyframes blink-animation {
0% {
opacity: 1;
}
20% {
pointer-events: none;
}
100% {
opacity: 0;
}
}

You could control the blinking with transition and js instead of a keyframes animation. This way you have more fine grain control over the blinking and timing of music. You can also disable the button when not in a "blinky" state.
If you have any questions please ask.
const btn = document.querySelector("button");
const wait = ms => new Promise(r => setTimeout(r, ms));
(async () => {
while (true) {
btn.classList.add("blink");
btn.disabled = false;
await wait(1000);
btn.classList.remove("blink");
btn.disabled = true;
await wait(1000);
}
})();
btn.addEventListener("click", () => {
console.log("clicked!");
});
button {
transition: box-shadow 0.2s, opacity 0.2s;
opacity: 0.5;
}
button.blink {
box-shadow: 0 0 3px 2px pink;
opacity: 1;
}
<button disabled="true">Blinky</button>

Related

How do I make something I click fade out and in before it goes to another website linked in the page?

So I'm coding this website and I what I want it to do before it changes to another website that I linked to the whole page is fade out. And when it's finally in the website, it fades in.
Does anybody know the code to this?
You can have a css animation for your fade-out and then use setTimeout() in js to delay the process and navigate to a new page via js after the animation is done
(instead of <a> tag)
function navigate(){
const element = document.querySelector('.otherWebsite');
element.classList.add('animation'); // setting the animation class to the element
setTimeout(() =>{
location.assign('https://stackoverflow.com')
} , 3000) // delaying the process of the navigation for 3s (3000ms)
}
.otherWebsite{
padding: 10px;
background-color: green;
color: #fff;
}
.animation{
animation: fadeout 3s linear 1 forwards;
}
#keyframes fadeout {
from{
opacity: 1;
}
to{
opacity: 0;
}
}
<div class="otherWebsite" onclick="navigate()">Click here</div>
Note: You can also make the js function flexible for multiple tags using data-href or your preferred data set
document.querySelectorAll('[data-href]').forEach(element =>{ // looping though all tags with 'data-href' in the page
// setting an onclick event listener for the element
element.onclick = () =>{
element.classList.add('animation') // setting animation class to element
const link = element.dataset.href || element.getAttribute('data-href'); // getting the link from the 'data-href' attribute
setTimeout(() => location.assign(link) , 3000) // navigate to a new website after 3s (3000ms)
}
})
.otherWebsite{
padding: 10px;
background-color: green;
color: #fff;
margin: 10px 0px;
}
.animation{
animation: fadeout 3s linear 1 forwards;
}
#keyframes fadeout {
from{
opacity: 1;
}
to{
opacity: 0;
}
}
<div class="otherWebsite" data-href="https://stackoverflow.com">Website (stackoverflow)</div>
<div class="otherWebsite" data-href="https://google.com">Website 2 (google)</div>

Animation help (ID:1738EH)

When I mouse enter the shoe1 i want the text1 to opacity 1 and go down some pxs, then when i mouseleave i want the text1 to go back to its original position. i want that to keep happening everytime i mouseneter the shoe1. but whats happening is when i mouseenter it does everything fine, the text moves to its px positon, then when i mouse leave and mouse enter again it does not work, the text1 does not appear.
//shoeanim
.shoe-7:hover{
top: 130px;
}
.textfadein{
animation: textfadein 1s ease;
animation-fill-mode: forwards;
}
.textfadein2{
animation: textfadein 1s ease;
}
#keyframes textfadein{
to{
top: 280px;
opacity: 1;
}
}
#keyframes textfadein2{
to{
top: 271px;
opacity: 0;
}
}
const shoe1 = document.querySelector('.shoe-7');
const text1 = document.querySelector('.vans');
shoe1.addEventListener('mouseenter', () =>{
text1.classList.add('textfadein');
});
shoe1.addEventListener('mouseleave', () =>{
text1.classList.remove('textfadein');
text1.classList.add('textfadein2');
});
There are a couple of problems with implementing the mouse leave functionality.
First, in the CSS the textfadein2 class has the same keyframes name as the textfadein class. It should be
.textfadein2{
animation: textfadein2 1s ease;
}
Second, when adding the textfadein class when the mouse moves into the element the textfadein2 class is not removed. As both classes are there, just the furthest down the cascade will be used. Try this:
shoe1.addEventListener('mouseenter', () =>{
text1.classList.add('textfadein');
text1.classList.remove('textfadein2');
});

How to restart a keyframe animation with setInterval?

I've been trying to find an answer to my problem but I haven't been able to find one.
I want to be able to clear an interval once it's done, but then be able to restart it.
My current code doesn't let me do that: once the interval stops, you can't run it again.
Here's my code:
function about() {
var about = document.getElementById("about")
about.classList.add("about-mi")
var moreinfo = setInterval (function() {
about.classList.remove("about-mi")
}, 2000)
clearInterval(moreinfo)
}
.about-mi {
animation-name: moreinfo;
animation-duration: 2s;
}
#keyframes moreinfo {
0% {color: black;}
50% {color: red; transform: translateY(-20px);}
100% {color: black;}
}
<a onclick="about()">▼</a>
<h2 id=about>About</h2>
I would prefer solutions that only require HTML, CSS, or JavaScript, but I am also open to try solutions that require jQuery.
Actually setInterval doesn't do anything here. You don't need to use interval for that, just use setTimeout.
function about() {
var about = document.getElementById("about")
about.classList.add("about-mi")
var moreinfo = setTimeout(function() {
about.classList.remove("about-mi")
}, 2000)
}
.about-mi {
animation-name: moreinfo;
animation-duration: 2s;
}
#keyframes moreinfo {
0% {
color: black;
}
50% {
color: red;
transform: translateY(-20px);
}
100% {
color: black;
}
}
<a onclick="about()">▼</a>
<h2 id=about>About</h2>
Also you can do this with only CSS
.about-mi {
animation: moreinfo 2s, reset 2.1s;
}
a:active+.about-mi {
animation: anything, reset 2.1s;
}
#keyframes moreinfo {
0% {
color: black;
}
50% {
color: red;
transform: translateY(-20px);
}
100% {
color: black;
}
}
#keyframes reset {
from,
to {
color: black;
transform: unset;
}
}
<p>Wait for the animation to finish before first clicking (2.1s). because the animation starts when the page loads.</p>
▼
<h2 id="about" class="about-mi">About</h2>
As you use the interval timeout to remove the class about-mi to match with the 2 seconds you have defined in your css with animation-duration: 2s; it gets hard to mantain when you start changing one of those values you always have to keep in mind ooooh I also have to update the other one say javascript value and css value
That given, in this case another approach is remove the class based on HTMLElement: animationend event like so:
var aboutElement = document.getElementById("about")
function about() {
aboutElement.classList.add("about-mi")
}
aboutElement.addEventListener("animationend", function(){
aboutElement.classList.remove("about-mi");
});
.about-mi {
animation-name: moreinfo;
animation-duration: 2s;
}
#keyframes moreinfo {
0% {color: black;}
50% {color: red; transform: translateY(-20px);}
100% {color: black;}
}
<a onclick="about()">▼</a>
<h2 id=about>About</h2>
In your specific case, it looks like you only need to run the code once, and not multiple times at intervals, so as #dgknca mentioned, all you need is a setTimeout.
How to restart an interval in general
Answering this in case other users comes across this post. The best you can do (as far as I'm aware) is to define a non-anonymous function with the functionality you want, and then use that in the interval:
function doSomething() {
// your logic here
console.log('I am doing something.');
}
// execute doSomething every 1 second
var interval = setInterval(doSomething, 1000);
Like so, you can cancel the interval using:
clearInterval(interval);
To "restart" the interval, you would need to assign interval to a new interval:
interval = setInterval(doSomething, 1000);

Let the animation at its end state JS/CSS

Here's my problem :
I'm developping a little animation with JS and CSS, and I would like this stop when the animation is over. Now, my animation go back to his basic state.
var
btn = document.getElementById("btn");
anim = document.getElementById("anim");
// button click event
btn.addEventListener("click", ToggleAnimation, false);
// apply all webkit events
anim.addEventListener("webkitAnimationStart", AnimationListener);
anim.addEventListener("webkitAnimationIteration", AnimationListener);
anim.addEventListener("webkitAnimationEnd", AnimationListener);
// and standard events
anim.addEventListener("animationstart", AnimationListener);
anim.addEventListener("animationiteration", AnimationListener);
anim.addEventListener("animationend", AnimationListener);
// handle animation events
function AnimationListener(e) {
if (e.type.toLowerCase().indexOf("animationend") >= 0) {
ToggleAnimation();
}
}
// start/stop animation
function ToggleAnimation(e) {
var on = (anim.className != "");
anim.className = (on ? "" : "enable");
};
#anim
{
display: block;
width: 150px;
height:150px;
background-color: #060;
}
#anim.enable
{
-webkit-animation: flash 1s ease;
animation: flash 1s ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
/* animation */
#-webkit-keyframes flash {
50% { margin-top:50px; }
}
#keyframes flash {
50% { margin-top:50px; }
}
<button id="btn">
Launch animation
</button>
<p><a id="anim" href="#"></a></p>
Here's my FIDDLE. I think the problem is in the function "ToggleAnimation" but I can't find what.
Thanks in advance and had a good day.
Azyme
I think I have achieved what you are trying to - changed the animation to have a start and end state (0% and 100%) and used jquery to add the class "enable" rather than toggle it
css
#-webkit-keyframes flash {
0% { margin-top: 0}
100% { margin-top:50px; }
}
#keyframes flash {
0% { margin-top: 0}
100% { margin-top:50px; }
}
jquery
$('#btn').click(function(){
$('#anim').addClass("enable");
})
hope thats helpful, made a codepen http://codepen.io/anon/pen/vLLKoZ

Div Show Hide With Effect

I have hiding a div with the simple query.
I want add a effect when hiding the div.
here is my code
<script type="text/javascript">
function divcustumfldshow() {
var dive = document.getElementById("divcustumfld");
dive.style.display = (dive.style.display == "none") ? "block" : "none";
}
<script>
I saw CSS3 in tags, so here is a pure CSS3 example:
.block {
transition: opacity 0.5s linear, transform 0.5s linear;
opacity: 1;
}
.block.hidden {
opacity: 0;
transform: scaleY(0);
}
Here's the fiddle: http://jsfiddle.net/andunai/1e21endf/
However, in this case the element will just disappear visually and won't free the place which it takes, so you'll have to end up with either making this element have position: absolute or animage padding, margin and max-height as well - note that transition of height is still having problems: How can I transition height: 0; to height: auto; using CSS?
.block {
transition: opacity 0.5s linear, transform 0.5s linear, max-height 0.5s linear, padding 0.5s linear;
opacity: 1;
max-height: 30px; /* This one must be approximately of the
height of element, not less */
}
.block.hidden {
opacity: 0;
max-height: 0;
padding: 0;
transform: scaleY(0);
}
Here's an example of adding almost true scaling: http://jsfiddle.net/andunai/1e21endf/1/
If you want a pure CSS3 solution to fade out and then immediately hide, you can simulate the hiding of the element by setting the max-height to 0. You also need to set overflow:hidden when the element is hidden to ensure the max-height isn't affected by the contents.
When you animate the max-height, you delay it by the fade-out time and set the animation time to 0s to ensure it happens immediately when the fade-out has completed, and vice versa on show:
function divcustumfldshow() {
var dive = document.getElementById("divcustumfld");
// toggle the class name - this will need to be more inteligent if it has multiple classes
dive.className = dive.className ? '' : 'hidden';
}
#divcustumfld {
transition: opacity 2s linear, max-height 0s linear 0s;
opacity: 1;
background: red;
max-height:100%;
}
#divcustumfld.hidden {
opacity: 0;
transition: opacity 2s linear, max-height 0s linear 2s;
max-height: 0;
overflow:hidden;
}
<button onclick="divcustumfldshow()">Click</button>
<div id="divcustumfld">Foo<br/>Bar</div>
<div>Blah blah</div>
It is not recommended but for idea see output below,you can make an interval and can make opacity alter with each interval. I advice you to use css3 or jquery for effects
var count= 1;
i = setInterval(function(){
divcustumfldshow(count)
if(count==10)
clearInterval(i);
else
count++;
},200);
function divcustumfldshow(count1) {
var dive = document.getElementById("divcustumfld");
if(count1==10)
{dive.style.display = "none";}
else {
console.log(dive.style.opacity)
dive.style.opacity = (10-count1)/10;
}
}
#divcustumfld{width:200px;
height:200px;
background:red;
opacity:1;
}
<div id="divcustumfld">
</div>
demo - http://jsfiddle.net/thjzgv93/
you can use css3 opacity to hide the element
#divcustumfld {
opacity:1;
transition: .5s linear;
}
#divcustumfld.hide {
opacity:0;
}
or you can use translate
demo - http://jsfiddle.net/thjzgv93/1/
#divcustumfld {
transition: .5s linear;
}
#divcustumfld.hide {
transform:translatey(-100%)
}
<div id="divcustumfld">
Your data elements
</div>
Ok
$('#btn1').click(function(){
$('#divcustumfld').hide();
});
http://jsfiddle.net/mynameisvikram/vv0ranzo/

Categories

Resources