How to activate a CSS3 (webkit) animation using javascript? - javascript

Im really stuck. I want a CSS animation I have created (below) to activate on clicking a div. The only way I thought I could do that was using javascript to create an onClick event. However I dont know how to run/refrence the animation that is in my css file. Can anyone help me?
This is the animation in my css file that I want to run by clicking on a div.
#-webkit-keyframes colorchange {
0% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
33% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
}
67% {
background-color: green;
opacity: 0.5;
-webkit-transform: scale(1.1) rotate(5deg);
}
100% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}
I even tried putting the css in the same file as the javascript (index.html) and used the following code to try and activate it on click, but no luck.
<script>
function colorchange( test )
{
test.style.webkitAnimationName = 'colorchange ';
}
</script>
Please help :)

You're missing the duration and you have a trailing space in the name you assign:
function colorchange( test )
{
test.style.webkitAnimationName = 'colorchange'; // you had a trailing space here which does NOT get trimmed
test.style.webkitAnimationDuration = '4s';
}
Some more infos on #-webkit-keyframes:
http://webkit.org/blog/324/css-animation-2/
update
Some working code.
<html>
<head>
<style>
#-webkit-keyframes colorchange {
0% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
33% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
}
67% {
background-color: green;
opacity: 0.5;
-webkit-transform: scale(1.1) rotate(5deg);
}
100% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}
</style>
<script>
function colorchange(e) {
if (e.style.webkitAnimationName !== 'colorchange') {
e.style.webkitAnimationName = 'colorchange';
e.style.webkitAnimationDuration = '4s';
// make sure to reset the name after 4 seconds, otherwise another call to colorchange wont have any effect
setTimeout(function() {
e.style.webkitAnimationName = '';
}, 4000);
}
}
</script>
</head>
<body>
<div onclick="colorchange(this)">Hello World!</div>
</body>
</html>

Related

Play and Stop Audio File with Javascript onmouseenter & onmouseleave

Looking to use just Javascript without any libraries to start and stop audio on mouse enter and mouse leave. Also want the audio to loop while the div is being hovered. Right now I have two divs because I'm unsure of how to add multiple onmouseenter events and if this is even possible. Is all of this possible? Dropping my code snippet below.
document.addEventListener("mousemove", function(){
myFunction(event);
});
var mouse;
var cursor = document.getElementById("cursor");
function myFunction(e){
mouseX = e.clientX;
mouseY = e.clientY;
cursor.style.left = (mouseX-55) + "px";
cursor.style.top = (mouseY-55) + "px";
}
function play() {
var audio = new Audio('https://www.figurefoundry.xyz/metal/metaldrums.mp3');
audio.play();
}
body {
background: #fffdfa;
}
#cursor {
height: 100px;
width: 100px;
position: absolute;
backface-visibility: hidden;
z-index: 9999999;
pointer-events: none; /* pointer-events: none is needed */
cursor: none;
animation: spincursor infinite 1.5s steps(1, end);
}
div {
background: black;
width: 200px;
height: 100px;
margin: 30px;
cursor: none;
}
#keyframes spincursor {
0% {
transform: rotate(0deg);
}
12.5% {
transform: rotate(45deg);
}
25% {
transform: rotate(90deg);
}
37.5% {
transform: rotate(135deg);
}
50% {
transform: rotate(180deg);
}
62.5% {
transform: rotate(225deg);
}
75% {
transform: rotate(270deg);
}
87.5% {
transform: rotate(315deg);
}
100% {
transform: rotate(360deg);
}
}
<img src="https://www.figurefoundry.xyz/metal-cursor.svg" id="cursor" hidden></img>
<div onmouseenter="play()">
<div onmouseenter="cursor.hidden = false" onmouseleave="cursor.hidden=true">
</div> <!--make cursor invisible on leave and visible on enter-->
</div>
I think you're going to get an error in console if you do this in Chrome: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first You need to interact ( click) something for audio to be played .
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

How to fire "animationend" event, when I can't set a CSS animation?

If I set the css animation to "element", it's fine. If the Css animation is not available, how does it function fire like a zero seconds animation in the ES5?
function run() { ... }
element.addEventListener('animationend', run);
Reply for
#Anurag Srivastava,
Am I wrong idea or do I have the following code wrong? Either way, the return value is "".
var el1 = document.getElementById("notAnimation");
console.log(el1.style.animation);
var el2 = document.getElementById("onAnimation");
console.log(el2.style.animation);
div {
padding: 10px;
margin: 20px;
}
#notAnimation {}
#onAnimation {
animation: scale 10s ease-in-out;
}
#keyframes scale {
0% {
transform: scale(1);
opacity: 1;
color: black;
}
50% {
transform: scale(0.95);
opacity: .4;
color: red;
}
100% {
transform: scale(1);
opacity: 1;
color: black;
}
}
<div id="notAnimation">
Not Animation
</div>
<div id="onAnimation">
Animation
</div>
You can check if element.style.WebkitAnimation and element.style.animation contain any value and execute run() if the value is ""
Edit Turns out that .style will return "" for any value. What you need is window.getComputedStyle() along with the property animationName. If it is none, there is no animation, else there is. Check the code below:
var el1 = document.getElementById("notAnimation");
console.log(window.getComputedStyle(el1)["animationName"])
var el2 = document.getElementById("onAnimation");
console.log(window.getComputedStyle(el2)["animationName"])
div {
padding: 10px;
margin: 20px;
}
#notAnimation {}
#onAnimation {
animation: scale 10s ease-in-out;
}
#keyframes scale {
0% {
transform: scale(1);
opacity: 1;
color: black;
}
50% {
transform: scale(0.95);
opacity: .4;
color: red;
}
100% {
transform: scale(1);
opacity: 1;
color: black;
}
}
<div id="notAnimation">
Not Animation
</div>
<div id="onAnimation">
Animation
</div>

How to do 3 jQuery callbacks

I want to have three functions to be performed in order. First, enlarge a object, then rotate 360 degrees, last resize to the size it was before enlargement. I can do the first and second, but I don't know how to do the last.
How can I accomplish this using jQuery callbacks? Can anyone give me a structure to work from? I am so new to jQuery.
Here's what I have so far:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#abc').click(function () {
$(this).animate({
width: '+=90px',
height: '+=90px',
fontSize: '300%'
}, function(){
$(this).toggleClass('rotate');
});
// add function -- resize to normal
});
});
</script>
<style>
.rotate {
transition: all 0.7s;
-webkit-transform: rotate(6.28rad);
-ms-transform: rotate(6.28rad);
transform: rotate(6.28rad);
}
</style>
</head>
<body>
<div id="abc" style="border:1px solid;width:90px;">HTML / CSS</div>
</body>
</html>
Here's the actual link I have created for you https://jsfiddle.net/beljems/t83xmj8h/. I have modified your code :)
I used CSS keyframes for animating the div element and added setTimeout function to the jquery, I have estimated the time that works fine :)
I'm tempted to suggest an full CSS animation for that "complex" animation, using #keyFrames.
And a setTimeout() to remove the animation class after.
$(document).ready(function() {
// Click handler
$('#abc').click(function() {
// CSS Animation!
$(this).addClass("twist");
// Remove the class after the animation...
setTimeout(function(){
$('#abc').removeClass("twist");
},3000); // Same delay as the animation time ( 3s )
});
});
#abc{
display: inline-block;
padding: 5px;
border: 1px solid black;
}
.twist{
animation-name: bigtwist;
animation-duration:3s;
}
#keyFrames bigtwist{
0%{
transform: scale(1) rotate(0rad);
}
30%{
transform: scale(3) translate(50%, 50%) rotate(0rad);
}
70%{
transform: scale(3) translate(50%, 50%) rotate(6.28rad);
}
99.9%{
transform: scale(1) translate(0%, 0%) rotate(6.28rad);
}
100%{
transform: scale(1) translate(0%, 0%) rotate(0rad);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="abc">HTML / CSS</div>
</body>

Why does the data-binding polyfill in Polymer not work within <style> tags?

I have been building a slideshow custom element using polymer and have been using the Animate.css library for slide transitions. When used Canary with "Experimental web platform" features turned on, the tag works as expected, but in the regular version of chrome with the experimental features turned off, the platform polyfill does not allow me to data-bind within style tags. As an example:
<polymer-element name="impress-slide" constructor="ImpressSlide" attributes="exit entrance">
<template>
<link rel="stylesheet" type="text/css" href="basic-animations.css">
<style type="text/css">
:host{
position: relative;
top: 0;
left: 0;
overflow: hidden;
display: none;
width: 100%;
height: 100%;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Animate.css */
-webkit-animation: 1s both;
animation: 1s both;
-webkit-animation-name: {{ animation }} !important;
animation-name: {{ animation }} !important;
}
#-webkit-keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
}
#keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
#keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
-ms-transform: scale(.3);
transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
:host(.past:host) {
/*opacity: 0;*/
}
:host(.current:host) {
display: block;
}
:host(.next:host) {
pointer-events: none;
}
</style>
<content></content>
</template>
<script type="text/javascript">
(function() {
Polymer('impress-slide', {
entrance: 'bounceIn',
exit: 'fadeOutRightBig',
animation: "",
animateIn: function() {
// this.opacity = 1;
this.animation = this.entrance;
},
animateOut: function() {
// this.opacity = 0;
this.animation = this.exit;
},
ready: function() {
}
})
})();
</script>
</polymer-element>
The animation-name: {{ animation }} !important; will remain unrendered in the polyfill version, evaluating simply to animation: 1s both;. I was wondering if anyone had any insight as to why this is and what I can do as a workaround?
So after some digging, I found a discussion of the problem on the polymer github page: https://github.com/Polymer/polymer/issues/270.
Basically, this is an unsupported feature in the ShadowDOMPolyfill for the time being, and the authors are unsure whether or not they will implement this functionality for performance reasons. The programmer assigned to the issue suggests the following workaround:
<style>
div {
border: 1px solid black;
width: {{width}}px;
}
/* polyfill specific rule */
/* #polyfill-rule
#host[id={{id}}] div {
border: 1px solid black;
width: {{width}}px;
}
*/
</style>
...
<script type="text/javascript">
Polymer('x-foo', {
...
registerCallback: function(declaration) {
// add shimmedStyles to this instance
if (window.ShadowDOMPolyfill) {
var content = declaration.templateContent();
content.insertBefore(content.shimmedStyle, content.firstChild);
}
}
});
</script>
For whatever reason, my own implementation of this method failed. In lieu of this, I wrote a workaround that, while being a little ugly, works quite well in unsupported browsers:
<script type="text/javascript">
(function() {
Polymer('impress-slide', {
entrance: 'bounceIn',
exit: 'fadeOutRightBig',
animation: "",
animateIn: function() {
this.animation = this.entrance;
// Fallback for polyfill
if (window.ShadowDOMPolyfill &&
((this.style.animationName != this.entrance) ||
(this.style.webkitAnimationName != this.entrance))) {
this.style.webkitAnimation =
this.style.animation = this.entrance + " 1s both";
}
},
animateOut: function() {
this.animation = this.entrance;
// Fallback for polyfill
if (window.ShadowDOMPolyfill &&
((this.style.animationName != this.exit) ||
(this.style.webkitAnimationName != this.exit))) {
this.style.webkitAnimation =
this.style.animation = this.exit;
}
},
ready: function() {
}
})
})();
</script>
Essentially, these modifications test the browser for the presence of the polyfill and for the incorrect assignment of the animation style properties. If these are found, the function will manually apply them to the slide using inline insertion (e.g. this.style.animation = this.entrance + " 1s both";).
The downsides of this approach are that it exposes the inner workings of the element to the end user in the event of the polyfill, undermining the goal of encapsulation within the custom element. However, under normal circumstances within a supported browser, the element will transition as expected, with the encapsulation intact.

CSS animation active doesn't continue?

I've been trying to learn css animations and I'm starting to get a grip on them but I'm having an issue an animation effect. I have an animation class assigned to a section that is a download button when I click it the animation plays for the extent of the click, if i click and hold it plays the whole animation. I want the animation to play all the way through on on click, not a click and hold.
Heres the Html section the class is applied to:
<a href="software/ASC.exe">
<section id="download" class="animated" title="Download ASC">
Download
</section>
</a>
Here is the CSS animation class:
.animated {
}
.animated:active {
-webkit-animation:fadeOutUp 2s;
-moz-animation:fadeOutUp 2s;
-o-animation:fadeOutUp 2s;
-ms-animation:fadeOutUp 2s;
animation:fadeOutUp 2s;
box-shadow:3px 1px 20px 4px #0099CC;
}
#-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
}
#-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-20px);
}
}
#-o-keyframes fadeOutUp {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(-20px);
}
}
#keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
Any help is appreciated!
HTML
<a href="#" id="buttonLink">
<section id="download" class="animated" title="Download ASC">
Download
</section>
</a>
CSS
.clicked {
-webkit-animation:fadeOutUp 2s;
-moz-animation:fadeOutUp 2s;
-o-animation:fadeOutUp 2s;
-ms-animation:fadeOutUp 2s;
animation:fadeOutUp 2s;
box-shadow:3px 1px 20px 4px #0099CC;
}
JavaScript
var el = document.getElementById('buttonLink');
el.addEventListener('click', function(){
document.getElementById('download').className = 'clicked';
})
DEMO
You could do it with jQuery
DEMO http://jsfiddle.net/kevinPHPkevin/Uj5gC/1/
$("#download").click(function () {
$(this).addClass("animated1");
});
To reset the animation just remove the class after 2 seconds
DEMO http://jsfiddle.net/kevinPHPkevin/Uj5gC/4/
$("#download").click(function () {
$(this).addClass("animated1");
setInterval(function () {
$("#download").removeClass("animated1");
}, 2000);
});
** EDITED**
Just for the challenge, here's a CSS only option using :target
DEMO http://jsfiddle.net/kevinPHPkevin/Uj5gC/2/
A demo that uses javascript to add that 'animated' class. Anyone knows a way to do that from CSS (kinda' impossible though :D)? It'd be interesting. Plunk here http://plnkr.co/edit/IhkmgKQ9Od0dyb3HFuEv?p=preview
window.onload = function() {
var btn = document.getElementById("download");
btn.addEventListener("click", function(e) {
this.className = "animated";
});
}
You can archieve this in pure CSS by using :not(:active) instead of just .active.

Categories

Resources