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
Related
I am having a little trouble in using javascript to access a css animation. My goal in this code is if you click the next button or previous button the border should spin but I am having trouble to trigger the css animation.
This is my html
<template>
<div v-on:click="prev" class="prevButton"><p><</p></div>
<div class="borderTop"></div>
<div v-on:click="next" class="nextButton"><p>></p></div>
</template>
This is the css
.border{
position: fixed;
height: 500px;
width: 500px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
border: 120px solid rgba(0, 0, 0, 0.555);
transform: rotate(45deg);
-webkit-animation: spin 2s linear; /* Safari */
animation: spin 2s linear;
}
#keyframes spin {
0% { transform: rotate(0deg);
border-right: 120px solid rgba(255, 255, 255, 0.226);}
100% { transform: rotate(360deg); }
}
this is the javascript
prev(){
document.querySelector(".borderTop").animate;
}
next(){
document.querySelector(".borderTop").animate;
}
You can't trigger the animation from Javascript. Instead you should add your animation style to an additional class which you can add to the div for the duration of the animation.
.animate {
animation: spin 2s linear;
}
Add anther class with animation-direction: reverse; if you would like to reverse the animation for the prev button.
prev() {
document.querySelector('.borderTop').classList.add('animate');
// Remove the animate class after the spin was performed so it works again when the button is clicked.
setTimeout(function() {
document.querySelector('.borderTop').classList.remove('animate');
}, 2000)
});
}
next() {
document.querySelector('.borderTop').classList.add('animate');
setTimeout(function() {
document.querySelector('.borderTop').classList.remove('animate');
}, 2000)
});
}
let borderAnimatable = document.querySelector(".borderTop")
prev(){
borderAnimatable.style.animation = "spin 2s linear";
borderAnimatable.style.WebkitAnimation = "spin 2s linear";
}
next(){
borderAnimatable.style.animation = "spin 2s linear";
borderAnimatable.style.WebkitAnimation = "spin 2s linear";
}
I wanted to have an image fade permanently until the user refreshes the page, and I was able to do so with animation-fill forwards. However, I would like this animation to initiate only when you hover over it.
I am able to make an image fade with hover independently, but it resets after the user moves their cursor from the element. In short, I am unable to make the transition and the hover effect work in conjunction.
Here is the HTML
<div class="hill">
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
</div>
Here is the CSS
body {
height:1000px;
}
#hill {
position: relative;
height: 100vh;
top: 100vh;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#hill {
-webkit-animation: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
animation: fade 5s;
animation-fill-mode: forwards;
}
This is the codepen to my project: https://codepen.io/narutofan389/collab/LYpxqmY
Much obliged for your help.
:hover state only applies when it is hovered, so it will not persist. I would recommend toggling a class on mouseenter via javascript. I've attached a fiddle to accomplish what you're intending. Let me know if you need any clarity. :)
document.addEventListener("DOMContentLoaded", function() {
var img = document.getElementById("hill");
img.addEventListener("mouseenter", function() { img.classList.add("hide")});
});
body {
height:1000px;
}
#hill {
position: relative;
height: 100vh;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#hill.hide {
-webkit-animation: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
animation: fade 5s;
animation-fill-mode: forwards;
}
<div class="hill">
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
</div>
You can consider animation-play-state and have the animation defined on the element initially but the duration need to be short because it won't work if the user rapidly move the mouse
#hill {
position: relative;
height: 100vh;
animation: fade 0.5s paused forwards;
}
#hill:hover {
animation-play-state:running;
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
So the element That I am manipulating has an id of spinning and a class of rotors
I can get my element to spin. I did this by using the css code here:
.rotors {
position: relative;
top: 90px;
left: 30px;
-webkit-animation:spin .5s linear infinite;
-moz-animation:spin .5s linear infinite;
animation:spin .5s linear infinite;
} #-moz-keyframes spin { 100% { -moz-transform:rotate(360deg);}}
#-webkit-keyframes spin { 100% { -webkit-transform:rotate(360deg);}}`
#keyframes spin { 100% { -webkit-transform:rotate(360deg);}}
But Say instead of it spinning automatically on the page load that I could press a button with an id of one and it would start to spin, and if I press a second button with an id of two, it would spin even faster then the first.
I am not sure how to achieve this. I did see where some people pointed out that you can change the css of an element using javascript but am unsure on how to achieve this especially on a button click. I want it to be something like getElementById(spinning).style.property = but on button click and just changing the speed of the rotation of my element.
One option would be to change the animation-duration CSS property dynamically with JavaScript.
var rotors = document.querySelector(".rotors");
function fast() {
rotors.style.animationDuration = ".2s";
}
function slow() {
rotors.style.animationDuration = ".5s";
}
.rotors {
height: 50px; /* for demo purpose */
width: 50px; /* for demo purpose */
animation: spin .5s linear infinite;
}
#keyframes spin {
100% { transform: rotate(360deg); }
}
<p>
<button onclick="fast()">Fast</button>
<button onclick="slow()">Slow</button>
</p>
<img class="rotors" src="https://cdn.onlinewebfonts.com/svg/img_489361.png" />
Add 2 buttons and use it to change the classes like below:
function startSpinning(){
var spDiv = document.getElementById('test');
if(spDiv.classList.contains('rotorsFast')){
spDiv.classList.remove('rotorsFast');
spDiv.classList.add('rotors');
}else{
spDiv.classList.add('rotors');
}
}
function startSpinningFast(){
var spDiv = document.getElementById('test');
if(spDiv.classList.contains('rotors')){
spDiv.classList.remove('rotors');
spDiv.classList.add('rotorsFast');
}else{
spDiv.classList.add('rotorsFast');
}
}
.rotors {
position: relative;
top: 90px;
left: 30px;
-webkit-animation: spin .5s linear infinite;
-moz-animation: spin .5s linear infinite;
animation: spin .5s linear infinite;
}
.rotorsFast {
position: relative;
top: 90px;
left: 30px;
-webkit-animation: spin .2s linear infinite;
-moz-animation: spin .2s linear infinite;
animation: spin .2s linear infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
` #keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
<div id="test" style="width:20px">apple</div>
<button onclick="startSpinning()">spin</button>
<button onclick="startSpinningFast()">spin Fast</button>
This is a nice spot to use a CSS custom variable. When the button is clicked, we toggle a secondary class on the .rotors div. When the faster class is present, the custom variable resets the animation speed to the faster speed, which is automatically applied to the animation.
const rotors = document.querySelector('.rotors');
const btn = document.querySelector('.rotorButton');
btn.addEventListener('click', () => {
rotors.classList.toggle('faster')
});
.rotors {
--spin-speed: 2s; /* Initial speed */
position: relative;
top: 40px;
left: 30px;
background-color: yellow;
color: black;
display: inline-block;
animation: spin var(--spin-speed) linear infinite;
}
.rotors.faster {
--spin-speed: .5s; /* Faster speed 🔥 */
}
#keyframes spin {
100% {
transform: rotate(360deg);
}
}
<div class="rotors">text</div>
<button class="rotorButton" type="button">Toggle Rotor Speed</button>
jsFiddle
I am using WOW.js and animate.css, right now I am running my CSS to Infinite. I would like know how can I make my class run for 3 seconds stop and start again to infinite?
My html:
<img src="images/fork.png" class="fork wow rubberBand" >
My CSS class:
.fork {
position: absolute;
top: 38%;
left: 81%;
max-width: 110px;
-webkit-animation-iteration-count: infinite ;
-webkit-animation-delay: 5s;
}
The solution can be in JS or CSS3.
With pure CSS3 animations, one way to add a delay between every single iteration of the animation would be to modify the keyframes setting such that they produce the required delay.
In the below snippet, the following is what is being done:
The whole duration of the animation is 6 seconds. In order to have the delay, the whole duration should be the duration for which your animation actually runs + time delay. Here, the animation actually runs for 3s, we need a 3s delay and so the duration is set as 6 seconds.
For the first 50% of the animation (that is, 3 seconds), nothing happens and the element basically holds its position. This gives the appearance of the 3 second delay being applied
For the next 25% of the animation (that is, 1.5 seconds) the element moves down by 50px using transform: translateY(50px).
For the final 25% of the animation (that is, last 1.5 seconds) the element moves up by 50px using transform: translate(0px) (back to its original position).
The whole animation is repeated infinite number of times and each iteration will end up having a 3 second delay.
div{
height: 100px;
width: 100px;
border: 1px solid;
animation: move 6s infinite forwards;
}
#keyframes move{
0% { transform: translateY(0px);}
50% { transform: translateY(0px);}
75% { transform: translateY(50px);}
100% { transform: translateY(0px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>
The animation-delay property introduces a delay only for the first iteration and hence it cannot be used to add delays between every iteration. Below is a sample snippet illustrating this.
div{
height: 100px;
width: 100px;
border: 1px solid;
animation: move 6s infinite forwards;
animation-delay: 3s;
}
#keyframes move{
0% { transform: translateY(0px);}
50% { transform: translateY(50px);}
100% { transform: translateY(0px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>
LIke this
html
<div class="halo halo-robford-animate"></div>
css
body{
background: black;
}
.halo{
width: 263px;
height: 77px;
background: url('http://i.imgur.com/3M05lmj.png');
}
.halo-robford-animate{
animation: leaves 0.3s ease-in-out 3s infinite alternate;
-webkit-animation: leaves 0.3s ease-in-out 3s infinite alternate;
-moz-animation: leaves 0.3s ease-in-out 3s infinite alternate;
-o-animation: leaves 0.3s ease-in-out 3s infinite alternate;
}
#-webkit-keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#-moz-keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#-o-keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5
}
100% {
opacity: 1;
}
}
jsfiddle
I am trying to install some Javacript to make my animation run more than once.
I have been given this script off the animate site but have no idea where to actually include the element that I want it to apply the animation to.
I wish to apply the animation 'animated zoomIn' to both the h2 and h3 headings that are in a div with the class of thumbtitle-box.
Here is my html:
div class="imagethumbnailleft">
<div class="thumbtitle-box"><h2>ARTFUL DODGER TRADING COMPANY</h2><h3>- Illustrated playing card series -</h3></div>
Here is my CSS:
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
#keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
And the Javascript - which is what the problem is:
$(document).ready(function() {
function animationHover(trigger, element, animation){
element = $(element);
trigger = $(trigger);
trigger.hover(
function() {
element.addClass('animated ' + 'zoomIn');
},
function(){
//wait for animation to finish before removing classes
window.setTimeout( function(){
element.removeClass('animated ' + animation);
}, 2000);
});
}
});
I am completely new to Javascript and any help would be much appreciated.
May be you are looking for this:
work for h2 and h3 tag under thumbtitle-box class
$(".imagethumbnailleft h2, .imagethumbnailleft h3").hover(function(){
animationHover(this,this,'zoomIn');
});
http://jsfiddle.net/a7r95y7x/2/