CSS Callback Functions Using Iteration

Developer
Zach Saucier
Size
2,720 Kb
Views
34,408
  1. CSS Callback Functions Using Iteration Previews
  2. CSS Callback Functions Using Iteration HTML Codes
  3. CSS Callback Functions Using Iteration CSS Codes
  4. CSS Callback Functions Using Iteration JS Codes

How do I make an css callback functions using iteration?

A method of using javascript to give CSS animations and transitions a type of "callback function". This example uses animation iteration as opposed to the other example which uses animation end. What is a css callback functions using iteration? How do you make a css callback functions using iteration? This script and codes were developed by Zach Saucier on 20 August 2022, Saturday.

CSS Callback Functions Using Iteration Previews
IQ Test

CSS Callback Functions Using Iteration - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Callback Functions Using Iteration</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<h3>Pure CSS</h3>
<div class='heart animated css'></div>
<h3>With Javascript</h3>
<div class='heart animated'></div> <script src="js/index.js"></script>
</body>
</html>

CSS Callback Functions Using Iteration - Script Codes CSS Codes

/* Most of the heart's CSS came from the Shapes of CSS */
/* http://css-tricks.com/examples/ShapesOfCSS/ */
.heart { position: relative; width: 100px; height: 90px; margin: 30px; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transition: all 1s;
}
.heart.css { -webkit-animation-delay:1s; -moz-animation-delay:1s; -ms-animation-delay:1s; -o-animation-delay:1s; animation-dely:1s;
}
.heart.animated { -webkit-animation: 1600ms pulsate infinite alternate ease-in-out; -moz-animation: 1600ms pulsate infinite alternate ease-in-out; -ms-animation: 1600ms pulsate infinite alternate ease-in-out; -o-animation: 1600ms pulsate infinite alternate ease-in-out; animation: 1600ms pulsate infinite alternate ease-in-out;
}
.heart:before,
.heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%;
}
.heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%;
}
.heart.css:hover { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); -webkit-animation:''; -moz-animation:none; -ms-animation:''; -o-animation:''; animation:'';
}
@keyframes pulsate { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); }
}
@-webkit-keyframes pulsate { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulsate { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); }
}
@-ms-keyframes pulsate { 0% { -ms-transform: scale(1); } 50% { -ms-transform: scale(1.3); } 100% { -ms-transform: scale(1); }
}
@-o-keyframes pulsate { 0% { -o-transform: scale(1); } 50% { -o-transform: scale(1.3); } 100% { -o-transform: scale(1); }
}

CSS Callback Functions Using Iteration - Script Codes JS Codes

var heart = document.getElementsByClassName('heart')[1], pfx = ["webkit", "moz", "MS", "o", ""], hovered = false;
function AnimationListener() { if(hovered) { heart.classList.remove('animated'); heart.style.webkitTransform = 'scale(2)'; heart.style.MozTransform = 'scale(2)'; heart.style.msTransform = 'scale(2)'; heart.style.OTransform = 'scale(2)'; heart.style.transform = 'scale(2)'; }
}
function TransitionListener() { if(!hovered) { heart.classList.add('animated'); }
}
function PrefixedEvent(element, type, callback) {	for (var p = 0; p < pfx.length; p++) {	if (!pfx[p]) type = type.toLowerCase();	element.addEventListener(pfx[p]+type, callback, false);	}
}
PrefixedEvent(heart, "AnimationIteration", AnimationListener);
heart.onmouseover = function() { hovered = true;
}
heart.onmouseout = function() { setTimeout(function() { hovered = false; }, 500); PrefixedEvent(heart, "TransitionEnd", TransitionListener); heart.style.webkitTransform = 'scale(1)'; heart.style.MozTransform = 'scale(1)'; heart.style.msTransform = 'scale(1)'; heart.style.OTransform = 'scale(1)'; heart.style.transform = 'scale(1)';
}
CSS Callback Functions Using Iteration - Script Codes
CSS Callback Functions Using Iteration - Script Codes
Home Page Home
Developer Zach Saucier
Username Zeaklous
Uploaded August 20, 2022
Rating 3.5
Size 2,720 Kb
Views 34,408
Do you need developer help for CSS Callback Functions Using Iteration?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zach Saucier (Zeaklous) Script Codes
Name
Business card
Swirling dots
Single Element gif Recreation
Click Based Rotation Demo
Single element color loader
Simple, flat contact form
Change transformation-origin mid animation
Responsive CSS bars
Circle Snake
Simple p5.js music visualizer
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!