I'm trying to get some text to slide from the left to the center of the webpage using HTML and CSS animations. The goal is to have the first block of text slide into the center first, then after a 2 second delay, have the second block of text slide into the center. So that there will be a nice effect of the reader watching lines as they are written on the page.
Here is the HTML code:
/* .slide1 {
-webkit-animation : slideIn 2s forwards;
-moz-animation : slideIn 2s forwards;
animation : slideIn 2s forwards;
} */
.slide2 {
/* animation-delay: 2s; */
margin-top : -20px;
-webkit-animation : slideIn 2s forwards;
-moz-animation : slideIn 2s forwards;
animation : slideIn 2s forwards;
}
#-webkit-keyframes slideIn {
0% { transform: translateX(-900px); }
100% { transform: translateX(0); }
}
#-moz-keyframes slideIn {
0% { transform: translateX(-900px); }
100% { transform: translateX(0); }
}
#keyframes slideIn {
0% { transform: translateX(-900px); }
100% { transform: translateX(0); }
}
<h1 class="slide1">You want to go to the moon.<br></h1>
<h1 class="slide2">We’re here to give you a shot.</h1>
So the trouble is, the animation is working for the second line, but not for the first line when you uncomment the class slide1 above.
The entire thing moves together, which is not what is supposed to happen. The point of having a delay for the animation in slide2 is meant so that after the first block of text finishes moving into the center, then the second block of text will start to move right.
It's confusing why this isn't working -
if you have any solutions to this, please share them!
you must first position your .slide1 and .slide2 off-screen
transform : translateX(-100vw);
...and contrary to what you imagine, the css commands must also respect an order and your delay command must be placed second after the global command of your translate
⛐ 😵 very very bad :
animation-delay : 2s;
animation : 2s slideIn forwards;
( it make animation-delay : 0; )
😁 😁 good :
animation : 2s slideIn forwards;
animation-delay : 2s;
.
otherwise you must respect the correct ordering of the arguments
animation : 2s 2s slideIn forwards;
but in my opinion the best way to write this - without repeating css:
.slide {
text-align : center;
transform : translateX(-100vw);
animation : 2s slideIn forwards;
}
.second {
margin-top : -.8em;
animation-delay : 2s;
}
#keyframes slideIn {
0% { transform : translateX(-100vw); }
100% { transform : translateX(0); }
}
<h1 class="slide">You want to go to the moon.</h1>
<h1 class="slide second">We’re here to give you a shot.</h1>
also note the use of units, and the correct way to center your text whatever the width of the display (as you indicate in your question)
So, it is possible to have reverse animation on mouse out such as:
.class{
transform: rotate(0deg);
}
.class:hover{
transform: rotate(360deg);
}
but, when using #keyframes animation, I couldn't get it to work, e.g:
.class{
animation-name: out;
animation-duration:2s;
}
.class:hover{
animation-name: in;
animation-duration:5s;
animation-iteration-count:infinite;
}
#keyframe in{
to {transform: rotate(360deg);}
}
#keyframe out{
to {transform: rotate(0deg);}
}
What is the optimal solution, knowing that I'd need iterations and animation itself?
http://jsfiddle.net/khalednabil/eWzBm/
I think that if you have a to, you must use a from.
I would think of something like :
#keyframe in {
from: transform: rotate(0deg);
to: transform: rotate(360deg);
}
#keyframe out {
from: transform: rotate(360deg);
to: transform: rotate(0deg);
}
Of course must have checked it already, but I found strange that you only use the transform property since CSS3 is not fully implemented everywhere. Maybe it would work better with the following considerations :
Chrome uses #-webkit-keyframes, no particuliar version needed
Safari uses #-webkit-keyframes since version 5+
Firefox uses #keyframes since version 16 (v5-15 used #-moz-keyframes)
Opera uses #-webkit-keyframes version 15-22 (only v12 used #-o-keyframes)
Internet Explorer uses #keyframes since version 10+
EDIT :
I came up with that fiddle :
http://jsfiddle.net/JjHNG/35/
Using minimal code. Is it approaching what you were expecting ?
Its much easier than all this: Simply transition the same property on your element
.earth { width: 0.92%; transition: width 1s; }
.earth:hover { width: 50%; transition: width 1s; }
https://codepen.io/lafland/pen/MoEaoG
I don't think this is achievable using only CSS animations. I am assuming that CSS transitions do not fulfil your use case, because (for example) you want to chain two animations together, use multiple stops, iterations, or in some other way exploit the additional power animations grant you.
I've not found any way to trigger a CSS animation specifically on mouse-out without using JavaScript to attach "over" and "out" classes. Although you can use the base CSS declaration trigger an animation when the :hover ends, that same animation will then run on page load. Using "over" and "out" classes you can split the definition into the base (load) declaration and the two animation-trigger declarations.
The CSS for this solution would be:
.class {
/* base element declaration */
}
.class.out {
animation-name: out;
animation-duration:2s;
}
.class.over {
animation-name: in;
animation-duration:5s;
animation-iteration-count:infinite;
}
#keyframes in {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes out {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
And using JavaScript (jQuery syntax) to bind the classes to the events:
$(".class").hover(
function () {
$(this).removeClass('out').addClass('over');
},
function () {
$(this).removeClass('over').addClass('out');
}
);
Creating a reversed animation is kind of overkill to a simple problem. What you need is:
animation-direction: reverse
However, this won't work on its own because animation spec forgot to add a way to restart the animation, so here is how you do it with the help of JS
let item = document.querySelector('.item')
// play normal
item.addEventListener('mouseover', () => {
item.classList.add('active')
})
// play in reverse
item.addEventListener('mouseout', () => {
item.style.opacity = 0 // avoid showing the init style while switching the 'active' class
item.classList.add('in-active')
item.classList.remove('active')
// force dom update
setTimeout(() => {
item.classList.add('active')
item.style.opacity = ''
}, 5)
item.addEventListener('animationend', onanimationend)
})
function onanimationend() {
item.classList.remove('active', 'in-active')
item.removeEventListener('animationend', onanimationend)
}
#keyframes spin {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(180deg);
}
}
div {
background: black;
padding: 1rem;
display: inline-block;
}
.item {
/* because span cant be animated */
display: block;
color: yellow;
font-size: 2rem;
}
.item.active {
animation: spin 1s forwards;
animation-timing-function: ease-in-out;
}
.item.in-active {
animation-direction: reverse;
}
<div>
<span class="item">ABC</span>
</div>
we can use requestAnimationFrame to reset animation and reverse it when browser paints in next frame.
Also use onmouseenter and onmouseout event handlers to reverse animation direction
As per
Any rAFs queued in your event handlers will be executed in the same
frame. Any rAFs queued in a rAF will be executed in the next frame.
function fn(el, isEnter) {
el.className = "";
requestAnimationFrame(() => {
requestAnimationFrame(() => {
el.className = isEnter? "in": "out";
});
});
}
.in{
animation: k 1s forwards;
}
.out{
animation: k 1s forwards;
animation-direction: reverse;
}
#keyframes k
{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<div style="width:100px; height:100px; background-color:red"
onmouseenter="fn(this, true)"
onmouseleave="fn(this, false)"
></div>
Would you be better off having just the one animation, but having it reverse?
animation-direction: reverse
Using transform in combination with transition works flawlessly for me:
.ani-grow {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.ani-grow:hover {
transform: scale(1.01);
}
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
Have tried several solutions here, nothing worked flawlessly; then Searched the web a bit more, to find GSAP at https://greensock.com/ (subject to license, but it's pretty permissive); once you reference the lib ...
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
... you can go:
var el = document.getElementById('divID');
// create a timeline for this element in paused state
var tl = new TimelineMax({paused: true});
// create your tween of the timeline in a variable
tl
.set(el,{willChange:"transform"})
.to(el, 1, {transform:"rotate(60deg)", ease:Power1.easeInOut});
// store the tween timeline in the javascript DOM node
el.animation = tl;
//create the event handler
$(el).on("mouseenter",function(){
//this.style.willChange = 'transform';
this.animation.play();
}).on("mouseleave",function(){
//this.style.willChange = 'auto';
this.animation.reverse();
});
And it will work flawlessly.
Try this:
#keyframe in {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframe out {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
supported in Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+
I want to do this effect (jsFiddle, when hover on button):
This is a part of the code i need i guess, what i want is:
every two seconds on a div with this button as the background-image:
i want the shining effect like in the fiddle, that will swoop in and out fast, after two seconds, another swoop, etc...
is it possible with css only?
if no, with javascript, what should be the case for me to do it?
Should i do an interval of:
setInterval(function(){
document.getElementById('btnDiv').classList.add('shining');
setTimeout(function(){
document.getElementById('btnDiv').classList.remove('shining');
,1000)
,2000)
I know it's a bit overkill for this kind of effects, isn't it?
Since you already have the effect you want on :hover, just convert it to an animation.
#element {
animation: pulse 1s linear infinite alternate;
}
#keyframes pulse {
from {
/* define initial state of animation here */
}
to {
/* define final state of animation here */
}
}
Using linear infinite alternate will make the pulse go back and forth between the two states. Depending on the effect you want to achieve, you may have better results by using something like 40% and 60% instead of from and to respectively, to add a bit of delay around the pulse.
#nodelay, #delay {
width: 100px;
height: 100px;
background-color: #080;
border-radius: 50px;
}
#nodelay {
animation: pulse 2s linear infinite alternate;
}
#delay {
animation: pulse-delay 2s linear infinite alternate;
}
#keyframes pulse {
from {background-color: #080}
to {background-color: #0f0}
}
#keyframes pulse-delay {
from, 40% {background-color: #080}
60%, to {background-color: #0f0}
}
<div id="nodelay"></div>
<div id="delay"></div>
I'd like to delay some clouds from starting on http://therealrohanm.me/Falcon-Hacks-Website/, neither animate delay nor transition delay seem to work. How would I accomplish this?
View the code here: https://github.com/Meeshbhoombah/meeshbhoombah.github.io
Check This Fiddle: http://jsfiddle.net/0cmonc5q/
#animated-cloud-background .cloud.cloud-1 {
top: 10%;
-webkit-animation: animateCloud 10s linear infinite;
-moz-animation: animateCloud 10s linear infinite;
animation: animateCloud 10s linear infinite;
-webkit-transform: scale(0.65);
-moz-transform: scale(0.65);
transform: scale(0.65);
z-index: -5;
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
#animated-cloud-background .cloud {
position: absolute;
top: 0;
left: -128px;
}
The animation delay is working, but it needs to be placed after the animations for your style.. Problem with this is that it also delays the first frame, So it appears on the screen until the delay has happened. I've fixed this by giving the cloud elements a -left position.. in this case 128 the width of the image.
And this fiddle: http://jsfiddle.net/0cmonc5q/1/
Shows each image having a different delay (1 to 5 seconds), i've given them all the same animation time/rate so they all move but shows the delay in effect.
How to prevent CSS3 transitions from reversing back?
For example: when i use
div
{
-webkit-transition:-webkit-transform 2s;
}
div:hover
{
-webkit-transform:rotate(360deg);
}
Whenever I move my mouse out it is rotating back,how to prevent it? SO that it only rotates forward when I place my mouse on the div and doesn't rotate back when my mouse leaves the div?
You have probably solved this already but in case you have not here is the solution to your particular problem of a 360 degree roll.
div
{
-webkit-transition: all 0.0s ;
-moz-transition: all 0.0s ;
-o-transition: all 0.0s ;
transition: all 0.0s;
}
div:hover
{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
You can use CSS animations instead and set the animation-fill-mode property to forwards which will persist the end state.
Here's a quick demo. As you can see it only rotates 360 degrees and then stops (Is this want you want?). If you want it to keep rotating as long as you have the mouse over the div, then you can change forwards to infinite and set the animation-timing-function to linear (to keep a consistent speed).
Like this:
animation: rotate 2s linear infinite;
But it won't look good when you hover out, since it breaks the animation & I don't think there is a fix for this. I hope this helped. If not, maybe a JavaScript solution, as mentioned in the other answer, would be better.
And here's the code from the demo.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background: #333;
}
.box:hover {
-webkit-animation: rotate 2s forwards;
animation: rotate 2s forwards;
}
#-webkit-keyframes rotate {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes rotate {
100% { transform: rotate(360deg); }
}
Also with Javascript an CSS Animation will be reversing back (animated rotating backwards as many times as it has been turned forward before), if you for example have an image element rotated for a few times by clicking through a foto gallery and then try to close it using visibility:hidden;
The solution i found was to disable the CSS animation first, before changing the elements settings or hiding the element. This way it will not reverse:
document.getElementById("picture").style.transition = "none 0s linear";
That's how :hover works. It's only effective while your mouse is over the element. To do something more permanent, you would need JavaScript.