Develop Reference

How to access the #keyframes selector and catch the value from there

There is code in css
#shape {
-webkit-animation: spin 50s infinite linear;
}
#-webkit-keyframes spin {
0% { transform: rotateY(0); }
100% { transform: rotateY(-360deg); }
}
I need to catch the moment of turning. Example : If the Y - axis rotation is -30 degrees , do the action
I tried a lot of things, but nothing came out. Used js and jquery

Keyframes generates only this events giving any information to JS:
animationstart
animationend
animationiteration
animationcancel
#keyframes sk-logo-main{
0% { transform: rotate(-360deg); }
100% { transform: rotate(0deg); }
}
#my-div-animated{
background:#666699;
color:#fff;
border-radius:50%;
width:100px;
height:100px;
line-height:100px;
text-align:center;
font-size:25px;
position:absolute;
animation-name: sk-logo-main;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
<div class='container'>
<div id="my-div-animated">
text
</div>
</div>
<script>
function AnimationListener( e ){
console.log ( e ) ;
}
window.addEventListener ( 'load', ()=>{
let animDiv = document.getElementById ( 'my-div-animated' );
animDiv.addEventListener( "animationstart", AnimationListener);
animDiv.addEventListener( "animationiteration", AnimationListener);
} );
</script>
You can not check animation progress state between this "states"/"events".
If you want to have full contronl at animated elements that you can do this animation in JS.

CSS animation, toggle rotate on click

I am try to have the caret in the following rotate 180 degrees on click for my dropdown menu. In the solution Im trying to implement, it changes the class of the the caret to toggle-up or toggle-down on click. The first time I click on it rotates up, the second time it immediately goes back to its starting position and then rotates back up. I smell dirty code, whats the easiest way to add this toggle rotation animation. Thanks in advance for any help. Heres my current css:
.toggle-up {
animation-name: toggle-up;
animation-delay: 0.25s;
animation-duration: 0.75s;
animation-fill-mode: forwards;
}
.toggle-down {
animation-name: toggle-down;
animation-delay: 0.25s;
animation-duration: 0.75s;
animation-fill-mode: forwards;
}
/*animations*/
#keyframes toggle-up {
100% {
transform: rotate(180deg);
}
}
#keyframes toggle-down {
100% {
transform: rotate(180deg);
}
}

You don't really need a keyframe animation for something this simple. If you just add a class to your icon on click then remove it this will apply your rotation. Here is a working plunkr using font awesome and a simple rotation. This is just a simple example, you will want to make use of vendor prefixes and be aware that css transitions do not work in older browsers.
<div id="container">
<i id="icon" class="fa fa-arrow-down"></i>
</div>
.fa-arrow-down{
transform: rotate(0deg);
transition: transform 1s linear;
}
.fa-arrow-down.open{
transform: rotate(180deg);
transition: transform 1s linear;
}
(function(document){
var div = document.getElementById('container');
var icon = document.getElementById('icon');
var open = false;
div.addEventListener('click', function(){
if(open){
icon.className = 'fa fa-arrow-down';
} else{
icon.className = 'fa fa-arrow-down open';
}
open = !open;
});
})(document);

.square {
width: 100px;
height: 100px;
background-color: #ff0000;
transition: all 0.75s 0.25s;
}
.toggle-up {
transform: rotate(180deg);
}
.toggle-down {
transform: rotate(0);
}
You should have an initial state in order to complete your animation.
Here is the example: codepen
UPDATE
Here is the version without using javascript: codepen
<label for="checkbox">
<input type="checkbox" id="checkbox">
<div class="square toggle-down"></div>
</label>
#checkbox {
display: none;
}
.square {
width: 100px;
height: 100px;
background-color: #ff0000;
transition: all 0.75s 0.25s;
transform: rotate(0);
}
#checkbox:checked + .square {
transform: rotate(180deg);
}
The general idea is to change the block class using Adjacent sibling selectors and the checkbox checked state.

CSS TranslateY Animation on Safari

I want to slide in a fullscreen div from the top using CSS. I am using AngularJS (ionic framework) but attempting to keep this animation pure css. The div won't slide down in Safari (works in Chrome) - it just appears. But it will slide back up properly.Here's the code:
HTML:
<div class="slideDown ng-hide" id="gallery-overlay" ng-show="showGallery" ng-click="hideGalleryClick()"></div>
CSS:
.slideDown{
-webkit-animation-name: slideDown;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
#-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(0%);
}
}
.slideUp{
-webkit-animation-name: slideUp;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
#-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(0%);
}
100% {
-webkit-transform: translateY(-100%);
}
}
JS:
$scope.showGalleryClick = function() {
$('#gallery-overlay').removeClass('slideUp');
$('#gallery-overlay').addClass('slideDown');
$scope.showGallery = true;
}
$scope.hideGalleryClick = function() {
$('#gallery-overlay').removeClass('slideDown');
$('#gallery-overlay').addClass('slideUp');
$scope.showGallery = false;
}
Is the problem with translateY(-100%) ?? How can I make this div slide in from the top and slide back up?

Converted to transitions instead of animations.
Fixed ng-click on anchor tag causing page to post by preventDefault().
Converted show/hide to toggle.
function GalleryCtrl($scope) {
$scope.toggleGallery = function($event) {
angular.element(document.querySelector('#gallery-overlay')).toggleClass('slideDown');
$event.preventDefault();
$event.stopPropagation(); /* Not required, but likely good */
};
}
#gallery-overlay {
position: absolute;
top: -100px;
left: 0;
right: 0;
height: 100px;
background-color: #222;
transition: all 1s ease;
}
#gallery-overlay.slideDown {
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="GalleryCtrl">
<div>
Click me to slide panel down
</div>
<div id="gallery-overlay" ng-click="toggleGallery($event)"></div>
</div>
</div>

CSS3 animation can't be called by javascript

I am doing some tests in order to later animate a website and i want to be able to make a button bounce when its clicked on however i cannot seem to get it to work. THe animation for the heading works fine on page load.
This is my entire code
<head>
<script>
function click(test){
test.style.webkitAnimationName = 'bounce';
test.style.webkitAnimationDuration = '3s';
setTimeout(function() {
test.style.webkitAnimationName = '';
}, 4000);
}
</script>
<style>
h1 {
-webkit-animation-duration: 3s;
-webkit-animation-name: slidein;
}
#-webkit-keyframes slidein {
0% {
margin-left: 100%;
width: 300%;
}
100%{
margin-left: 0%;
width: 100%;
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
</style>
<title>Success message</title>
</head>
<body>
<H1> You entered all the data required </H1>
<button onclick="click(this)">amg4aeorg;ji</button>
</body>
can someone please tell me why it isn't working, thank you in advance
EDIT
Ive done some testing and found out the the javascript function isn't actually running, anybody know why? thx

Make a CSS class to wrap the animation, then add that CSS class name to the element.
test.setAttribute('class','bounceThis');
CSS:
.bounceThis {
-webkit-animation: bounce 3s ease-out;
-moz-animation: bounce 3s ease-out;
animation: bounce 3s ease-out;
}
#-webkit-keyframes bounce { ... etc.... }

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.