We Keep Coding

CSS animation to occur on a timer to create a heartbeat animation

The snippet below shows a spinning circle. Every 1 second I want this circle to double in size and then shrink back to it's original size(to look like a heartbeat). The way I am attempting to do this is by creating a timer in javascript so that every one second, the class which causes the grow effect is removed from the circle, and then immediately added back on. I was hoping that having the class added back on after being removed would trigger the animation but I guess not. Right now the "heartbeat" only happens once.
Also I would like to have the circle spinning at constant speed if that's possible. Right now the circle really slows down at the end, and starts a little bit slow.
// set timeout
let tid = setTimeout(mycode, 1000);
function mycode() {
// do some stuff...
let ic = document.getElementById('inner-circle')
ic.classList.remove('heartbeat')
ic.classList.add('heartbeat')
tid = setTimeout(mycode, 1000); // repeat myself
}
function abortTimer() { // to be called when you want to stop the timer
clearTimeout(tid);
}
#spinning-circle {
animation-name: spinning-circle;
animation-duration: 10s;
animation-iteration-count: infinite;
width: 40px;
height: 40px;
}
.heartbeat {
width: 100%;
height: 100%;
animation-name: heartbeat;
animation-duration: 0.15s;
animation-iteration-count: 2;
animation-direction: alternate;
animation-fill-mode: both;
}
#inner-circle img {
width: 100%;
height: auto;
}
#-webkit-keyframes heartbeat {
100% {
transform: scale(2,2);
-webkit-transform: scale(2,2);
}
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div id="spinning-circle">
<div id='inner-circle'>
<img src="http://i.stack.imgur.com/WbNlQ.jpg">
</div>
</div>

use setInterval() and clearInterval() instead of setTimeout(), and remove the setTimeout() inside the function mycode()
// set timeout
let tid = setInterval(mycode, 1000);
function mycode() {
// do some stuff...
let ic = document.getElementById('inner-circle')
ic.classList.remove('heartbeat')
ic.classList.add('heartbeat')
}
function abortTimer() { // to be called when you want to stop the timer
clearInterval(tid);
}
and for the animation speed add animation-timing-function: linear; to .heartbeat {} and #spinning-circle {}

You don't need javascript at all:
#spinning-circle {
margin-top: 40px;
margin-left: 40px;
animation: spinning-circle linear 10s infinite;
width: 40px;
height: 40px;
overflow: visible;
}
#inner-circle {
animation: heartbeat 1s infinite;
}
#inner-circle img {
width: 100%;
height: auto;
}
#keyframes heartbeat {
0% {
transform: scale(1);
}
25% {
transform: scale(2);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
#keyframes spinning-circle {
0% {
transform: rotate(0turn);
}
100% {
transform: rotate(-1turn);
}
}
<div id="spinning-circle">
<div id='inner-circle'>
<img src="http://i.stack.imgur.com/WbNlQ.jpg">
</div>
</div>

How to trigger a CSS animation from JS?

I have a balloon that when hovered, will expand n disappear (a popping-like animation). I made this in CSS but when the cursor moves, the balloon returned. I want the balloon to disappear forever until I refresh the page, so I guess it needs to be onclick, but that selector is not available in CSS.
Here's what I have in CSS
#keyframes pop
{
from{
opacity:1;
transform: translateZ(0) scale(1,1);
}
to{
opacity:0;
transform: translateZ(0) scale(1.5,1.5);
}
}
.balloon:hover
{
animation: pop 0.5s cubic-bezier(0.16, 0.87, 0.48, 0.99) forwards;
}
I saw another question that said the closest thing is :active but it requires the mouse to be held down. If I want it to be onclick, I need to use Javascript. But I don't know what I need to write to trigger the animation.
And is it also possible to make it so that when I pop 1 balloon, all the others will pop too automatically with a 1s delay inbetween? (There are 5 balloons).

You can add and remove the class of the animation with JS using classList.
Add:
object.classList.add('balloon');
Remove:
object.classList.remove('balloon');
Working example:
const add = () => {
document.getElementById('balloon').classList.add('animation')
}
const remove = () => {
document.getElementById('balloon').classList.remove('animation')
}
#keyframes pop {
from {
opacity: 1;
transform: translateZ(0) scale(1, 1);
}
to {
opacity: 0;
transform: translateZ(0) scale(1.5, 1.5);
}
}
.animation {
animation: pop 0.5s cubic-bezier(0.16, 0.87, 0.48, 0.99) forwards;
}
.balloon {
height: 125px;
width: 110px;
background-color: #FF6B6B;
border-radius: 50%;
}
.controls{
position: absolute;
bottom: 10px;
right: 10px;
}
<div id="balloon" class="balloon" onmouseover="add()"></div>
<div class="controls">
<button onClick="add()">Hide</button>
<button onClick="remove()">Show</button>
</div>

Here is a solution which makes balloons hiding one by one with interval .5s between them
var balloons = document.getElementsByClassName('balloon');
[...balloons].forEach( (e, i)=>{
e.onmouseover = function() {
this.classList.add('hidden');
setTimeout(hideAll, 500, balloons);
}
});
function hideAll(arg){
[...arg].forEach( (e, i)=>{
if ( ! e.classList.contains('hidden') ) {
e.style.animationDelay = i+'s';
e.classList.add('hidden');
}
});
}
#keyframes pop
{
from{
opacity:1;
transform: translateZ(0) scale(1,1);
}
to{
opacity:0;
transform: translateZ(0) scale(1.5,1.5);
}
}
.balloon.hidden
{
animation: pop .5s cubic-bezier(0.16, 0.87, 0.48, 0.99) forwards;
}
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>

manipulate CSS animations with javascript

This is a simple question, but I'm pretty new to programming and I'm not exactly sure how to do this.
I have a div that moves on a button press
var checkbox = document.getElementById('checkbox');
var box = document.getElementById('box');
box.addEventListener('click', function() {
checkbox.checked = true;
});
#box {
position: absolute;
transform: translate3d(0, 0, 0);
height: 20%;
width: 20%;
background-color: red;
}
#keyframes moveRight {
0% {
transform: translate3d(0, 0, 0);
}
60% {
transform: translate3d(120%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
#checkbox:checked ~ #box {
animation-name: moveRight;
animation-duration: 1s;
animation-fill-mode: forwards;
}
<!DOCTYPE html>
<html>
<body>
<input type="checkbox" id="checkbox" />
<div id="box">
</div>
</body>
</html>
This is a simple animation, so doing it this way isn't really an issue for this case. The issue is when I want to add another animation to it via a checkbox, it sees that both checkboxes are "checked" and it runs both animations. With javascript and without a checkbox, how can I do the following:
-add a css animation
-remove it when I want to use another animation
Thanks!

This can be done, for example, by adding/removing a css class of box element.
(If I understood your question correctly)
var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
var box1 = document.getElementById('box1');
button1.addEventListener('click', function() {
box1.className = "";
box1.className += " moving-box-right";
});
button2.addEventListener('click', function() {
box1.className = "";
box1.className += " moving-box-left";
});
#box1 {
position: absolute;
transform: translate3d(0, 0, 0);
height: 20%;
width: 20%;
background-color: red;
}
#keyframes moveRight {
0% {
transform: translate3d(0, 0, 0);
}
60% {
transform: translate3d(120%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
#keyframes moveLeft {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
.moving-box-right {
animation-name: moveRight;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.moving-box-left {
animation-name: moveLeft;
animation-duration: 1s;
animation-fill-mode: forwards;
}
<!DOCTYPE html>
<html>
<body>
<button id="button1">Move box right</button>
<button id="button2">Move box left</button>
<div id="box1"></div>
</body>
</html>
https://jsfiddle.net/kdnzqx52/2/

css animation on load and on hover

How do I start a css animation on page load and trigger the same animation on the same element with hover. On page load, the animation will iterate 1 time. Once it stops, I will be able to trigger it repeatedly with hover. I attempted to rework the code at different CSS animation on load and on hover but I was unable to replicate it. I also pieced together the following, but only the on load animation works, not the hover:
img {
-webkit-animation: anim 10s linear;
-webkit-animation-iteration-count: 1;
animation: anim 10s linear;
animation-iteration-count: 1;
height: 50px;
width: 50px;
}
img:hover {
-webkit-animation: anim 10s infinite linear ;
animation: anim 10s infinite linear;
height: 50px;
width: 50px;
}
#-webkit-keyframes anim {
from { -webkit-transform: rotateX(0deg); }
to { -webkit-transform: rotateX(360deg); }
}
#keyframes anim {
from { transform: rotateX(0deg); }
to { transform: rotateX(360deg); }
}
Based on Vitorino Fernandes's suggestion about using a parent div for the hover, I got it to work:
img {
-webkit-animation: anim 10s linear;
-webkit-animation-iteration-count: 1;
animation: anim 10s linear;
animation-iteration-count: 1;
height: 50px;
width: 50px;
}
div:hover {
-webkit-animation: anim 10s infinite linear;
animation: anim 10s infinite linear;
height: 50px;
width: 50px;
}
#-webkit-keyframes anim {
from { -webkit-transform: rotateX(0deg); }
to { -webkit-transform: rotateX(360deg); }
}
#keyframes anim {
from { transform: rotateX(0deg); }
to { transform: rotateX(360deg); }
}
the html:
<div>
<img src="testpic.jpg"/>
</div>

you can add hover event for the parent and load event for img
img {
-webkit-animation: anim 10s linear;
-webkit-animation-iteration-count: 1;
animation: anim 10s linear;
animation-iteration-count: 1;
height: 50px;
width: 50px;
}
div:hover {
display: inline-block;
-webkit-animation: anim 10s infinite linear;
-webkit-animation-iteration-count: 1;
animation: anim 10s linear;
animation-iteration-count: 1;
height: 50px;
width: 50px;
}
#-webkit-keyframes anim {
0%, 100% {
-webkit-transform: rotateX(0deg);
}
50% {
-webkit-transform: rotateX(360deg);
}
}
<div>
<img src="https://via.placeholder.com/350x150" />
</div>

You can use javacsript or even jquery to make it easier, and add a class that has these animations then remove it when theyre over. Good idea?
$(document).ready(function(){
$("#id").animate({
whatever:whatev
etc... here go the css properties
})
})
This is javascript after referencing jquery ofc

If there is anyone wants to use this for an animation that should run when you open the page, hover it, when you scroll and run again when you scroll back, here is how I solved it.
I made this fiddle for this https://jsfiddle.net/hassench/rre4qxhf/
So there you go:
var $window = $(window);
var $elem = $(".my-image-container");
var $gotOutOfFrame = false;
function isScrolledIntoView($elem, $window) {
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && $gotOutOfFrame);
}
function isScrolledOutView($elem, $window) {
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom < docViewBottom) && (elemTop < docViewTop));
}
$(document).on("scroll", function() {
if (isScrolledIntoView($elem, $window)) {
$gotOutOfFrame = false;
$elem.addClass("animate");
$(function() {
setTimeout(function() {
$elem.removeClass("animate");
}, 1500);
});
}
if (isScrolledOutView($elem, $window)) {
$gotOutOfFrame = true;
$elem.removeClass("animate");
}
});
.my-image-container {
top: 50px;
max-width: 22%;
}
.my-image-container:hover {
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
.my-image-container .my-image {
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-moz-animation-delay: 1s;
-webkit-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
width: 100%;
}
.animate {
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-moz-animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
animation-delay: 0.5s;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The animation will run when you firt open the page,<br>
and when you hover it,<br>
and when you scroll out then in. <br>
<div class="my-image-container">
<img class="my-image"
src="http://www.lifeofpix.com/wp-content/uploads/2017/05/img-5831.jpg">
</div>
<br> Scroll down then back up
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
scroll up

I've put together a CodePen with a CSS-only fix and one with 2 lines of jQuery to fix the on-page load issue. Continue reading to understand the 2 solutions in a simpler version.
https://codepen.io/MateoStabio/pen/jOVvwrM
If you are searching how to do this with CSS only, Xaltar's answer is simple, straightforward, and is the correct solution. The only downside is that the animation for the mouse out will play when the page loads. This happens because to make this work, you style your element with the OUT animation and the :hover with the IN animation.
svg path{
animation: animateLogoOut 1s;
}
svg:hover path{
animation: animateLogoIn 1s;
}
#keyframes animateLogoIn {
from {stroke-dashoffset: -510px;}
to {stroke-dashoffset: 0px;}
}
#keyframes animateLogoOut {
from {stroke-dashoffset: 0px;}
to {stroke-dashoffset: -510px;}
}
Some people found this solution to be useless as it played on page load. For me, this was the perfect solution. But I made a Codepen with both solutions as I will probably need them in the near future.
If you do not want the CSS animation on page load, you will need to use a tiny little script of JS that styles the element with the OUT animation only after the element has been hovered for the first time. We will do this by adding a class of .wasHovered to the element and style the added class with the OUT Animation.
jQuery:
$("svg").mouseout(function() {
$(this).addClass("wasHovered");
});
CSS:
svg path{
}
svg.wasHovered path{
animation: animateLogoOut 1s;
}
svg:hover path{
animation: animateLogoIn 1s;
}
#keyframes animateLogoIn {
from {stroke-dashoffset: -510px;}
to {stroke-dashoffset: 0px;}
}
#keyframes animateLogoOut {
from {stroke-dashoffset: 0px;}
to {stroke-dashoffset: -510px;}
}
And voila! You can find all of this and more on my codepen showing in detail the 2 options with an SVG logo hover animation.
https://codepen.io/MateoStabio/pen/jOVvwrM

Dynamic word swapping animation

I'm trying to create an animation for text on a page that, every few seconds, changes one word out with another word from a list. Example: I have a header that says, "This is cool," but I want "cool" to be replaced every few seconds by "neat/awesome/groovy/etc".
I'm honestly not sure the best way to go about this (in terms of what technology to use) and I can't find a blurb of code that works with modern browsers. Help is greatly appreciated!

in Pure JS
http://jsfiddle.net/M5gxH/3/
<script>
var words = ["neat", "great", "best", "groovy"];
var i = 0;
var text = "This is cool";
function _getChangedText() {
i = (i + 1) % words.length;
console.log(words[i]);
return text.replace(/cool/, words[i]);
}
function _changeText() {
var txt = _getChangedText();
console.log(txt);
$("#changer").text(txt);
}
setInterval("_changeText()", 1000);
</script>
<span id="changer">This is cool</span>

In jQuery, I'd do something like this:
http://jsfiddle.net/6SRaB/1/
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() { // on document load
changer();
});
function changer() {
var words = ["nifty","groovy","far out"]; // add as many as you like
var idx = Math.floor(words.length * Math.random()); // randomizer
$('#change').text(words[idx]); // replaces the contents of "change"
var time = Math.floor(5000 * Math.random() + 3000); // in milliseconds
setTimeout(changer,time); // lather, rinse, repeat
}
</script>
...
<h2>This is <span id="change">cool</span></h2>
The key is to use a SPAN tag with an ID that you can pick out quickly.

This question is quite old but it showed up in a google search for me. In 2018 you can easily implement this behavior with CSS Animations without the need for any additional JavaScript code.
The following should give you what you need:
<!DOCTYPE html>
<html>
<head>
<style>
.animated{
display: inline;
text-indent: 8px;
}
.animated span{
animation: topToBottom 12.5s linear infinite 0s;
-ms-animation: topToBottom 12.5s linear infinite 0s;
-webkit-animation: topToBottom 12.5s linear infinite 0s;
color: red;
opacity: 0;
overflow: hidden;
position: absolute;
}
.animated span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.animated span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.animated span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.animated span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
#-moz-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(-50px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(-50px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(-50px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
</style>
</head>
<body>
<h2>CSS Animations are
<div class="animated">
<span>cool.</span>
<span>neat.</span>
<span>awesome.</span>
<span>groovy.</span>
<span>magic.</span>
</div>
</h2>
</body>
</html>
Note that this is just an example with vertical sliding. There are basically endless possibilities with CSS in terms of animations/transitions.