I have an element
<a class="fa fa-user icon" href="#"></a>
My requirement is to have a pulsing effect whenever the mouse is on top of it.
My CSS is something like this.
.icon:hover{
-webkit-animation: pulse 2s ease-in;
-moz-animation: pulse 2s ease-in;
animation: pulse 2s ease-in;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#keyframes pulse {
0% {
-webkit-transform: scale(1);
opacity: 0.0;
}
25% {
-webkit-transform: scale(1.35);
opacity: 0.1;
}
50% {
-webkit-transform: scale(1.7);
opacity: 0.3;
}
75% {
-webkit-transform: scale(2.05);
opacity: 0.5;
}
100% {
-webkit-transform: scale(2.4);
opacity: 0.0;
}
}
The effect works fine but the thing is the original icon disappears. I want the original icon to remain visible while the pulsating effect is happening to make it stand out while the person is holding the mouse on top of it.
Do I need to overlay the original div with a new icon?
JSFiddle is available: https://jsfiddle.net/3bu8fxnp/9/
Updated Fiddle
You can add a second icon in the after pseudo element.
.fa-user:after {
content: "\f007";
display: block;
}
.fa-user:before {
position: absolute;
}
You need to change the selector with the transition as well to only affect one of the pseudo elements.
.icon:hover:before {
...
}
Related
am looking for a solution to make some animations on an item when we try to load the next one.
Here is what i have:
Before i click i have this :
After Click:
I want to show the image in background when i click on the list element at the right side (Man, Woman...).
The backgroud image is hidden on the right, it exceeds the screen and this one is resized.
I need to hide the backgroundimage without resizing the screen, and show it when click with animation.
CSS:
img.slider__bg {
width: 100%;
position: absolute;
transform: translateX(100%);
-webkit-transform: translateX(100%);
transition: transform .5s 4s;
&.showBg {
animation: showBg 0.5s forwards;
-webkit-animation: showBg 0.5s forwards;
}
&.hideBg {
animation: hideBg 0.5s forwards;
-webkit-animation: hideBg 0.5s forwards;
}
#keyframes showBg {
100% { transform: translateX(0%); }
}
#-webkit-keyframes showBg {
100% { -webkit-transform: translateX(0%); }
}
#keyframes hideBg {
0% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}
#-webkit-keyframes hideBg {
0% { -webkit-transform: translateX(0%); }
100% { -webkit-transform: translateX(100%); }
}
}
Use conditional rendering to display the background image when you click. You need to declare a state to identify whether you clicked or not.
I'm using CSS keyframes to rotate an element on its hover state.
How do I make the element finish its animation even the mouse leave the element before it actually end?
For example, if I move my mouse out of the element(stop hovering) while the element only rotating to 180 degree (the full animation is 360 degree), it immediately stop the animation and go back to its original state instead of finish the animation.
#rotate {
width: 120px;
height: 120px;
background-color: orange;
}
#rotate:hover {
animation: rotating 1s ease 0s 1 normal forwards;
}
#keyframes rotating {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<div id="rotate"></div>
You need to use Javascript for this, the following snippet is shown using some jQuery, a working example:
$("#rotate").on({
mouseenter() {
$(this).addClass("animated");
},
animationend() {
$(this).removeClass("animated");
},
});
#rotate {
width: 120px;
height: 120px;
background-color: orange;
}
.animated {
animation: rotating 1s ease 0s 1 normal forwards;
}
#keyframes rotating {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rotate"></div>
Make sure that the class animated is with the animation, and #rotate is the box you want to spin.
This worked for my situation as it pauses and starts from where it left off. For simple rotation, this feels nicer than the jump you usually get from hovering in and out.
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.name-star {
right: 5px;
top: 15px;
animation: 5s rotate infinite;
animation-play-state: paused;
animation-timing-function: ease-in;
}
.mat-grid-tile:hover .name-star {
animation-play-state: running;
}
I want to flip an image instantly every 1000ms. I'm trying but the animation does what it's supposed to do (gradually flip the picture). If i can flip instantly the picture it will give the idea of a walking duck. I know I can use setInterval() but I'd rather do this in CSS only.
.duck {
position: absolute;
animation: flip-me;
animation-duration: 1000ms;
animation-direction: alternate;
animation-iteration-count: infinite;
}
#keyframes flip-me {
0% { transform: scaleX(1) }
100% { transform: scaleX(-1) }
}
You can consider steps()
img {
animation: flip-me 2s steps(1) infinite;
}
#keyframes flip-me {
50% { /*Pay attention: it's 50% not 100% !!*/
transform: scaleX(-1)
}
}
/*no need 0% or 100% state as they be set by default to scaleX(1)*/
<img src="https://picsum.photos/200/200?image=1069">
I have an element which functions as a tri-state checkbox. I want to run an animation on that element whenever the state changes. Essentially, the element starts with no classes attached to indicate the first state. Then I add a class for one state, then remove that class and add a different one for the second state.
It works on the first click but the animation doesn't play on subsequent clicks. Here's what I have so far:
$('button').click(function() {
var $div = $('div');
if (!$div.hasClass('is-colored')) {
$div.addClass('green is-colored');
} else {
$div.toggleClass('green red');
}
});
#keyframes Animation {
from {
opacity: 0;
transform: scaleX(0) scaleY(0);
}
to {
opacity: 1;
transform: scaleX(1) scaleY(1);
}
}
.green {
background-color: #0F0;
-webkit-animation: Animation 0.25s linear forwards;
-moz-animation: Animation 0.25s linear forwards;
animation: Animation 0.25s linear forwards;
}
.red {
background-color: #F00;
/* I tried applying the animation on the second state but this isn't working */
-webkit-animation: Animation 0.25s linear forwards;
-moz-animation: Animation 0.25s linear forwards;
animation: Animation 0.25s linear forwards;
}
div {
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<button>Change Color</button>
I know it's possible to restart an animation with JavaScript and as of 3 years ago it didn't seem to be possible to do this without JavaScript.
In short, is it possible to perform the same animation on the same element multiple times using only CSS and toggling classes (i.e, no timeout required)?
What's happening is because the state never gets a reset so the animation doesn't kick in again. What you want to do is remove the color class as it resets, "wait" (0 seconds) then have the new class kick in for the animation.
The change is like this for green, see below for full changes:
$div.removeClass('green');
setTimeout(function() {
$div.addClass('red');
}, 0);
Edit: To do this without javascript delay. The only way is to create another version of the animation so it constantly runs a different animation:
$('button').click(function() {
var $div = $('div');
if (!$div.hasClass('is-colored')) {
$div.addClass('green is-colored');
} else {
$div.toggleClass('green red');
}
});
#keyframes Animation {
from {
opacity: 0;
transform: scaleX(0) scaleY(0);
}
to {
opacity: 1;
transform: scaleX(1) scaleY(1);
}
}
#keyframes Animation2 {
from {
opacity: 0;
transform: scaleX(0) scaleY(0);
}
to {
opacity: 1;
transform: scaleX(1) scaleY(1);
}
}
.green {
background-color: #0F0;
-webkit-animation: Animation 0.25s linear forwards;
-moz-animation: Animation 0.25s linear forwards;
animation: Animation 0.25s linear forwards;
}
.red {
background-color: #F00;
/* I tried applying the animation on the second state but this isn't working */
-webkit-animation: Animation2 0.25s linear forwards;
-moz-animation: Animation2 0.25s linear forwards;
animation: Animation2 0.25s linear forwards;
}
div {
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<button>Change Color</button>
I'm entering the world of CSS3 animations and transitions so please forgive my ignorance.
Here's the simplified version of what I'm trying to do:
I have a ball that "pulsates" infinitely via CSS3 keyframes
I want the ball to grow bigger and stay like that when I hover over it
I want the ball to become small again when I move the mouse away from it and keep pulsating (all the transitions need to be smooth, of course).
Here's my stab at it using a mix of CSS3 animations and transitions (testing this on Chrome so far, hence webkit prefixes):
#-webkit-keyframes pulsate {
from {
-webkit-transform: scale(0.7);
}
to {
-webkit-transform: scale(0.8);
}
}
.ball {
background: blue;
width: 100px;
height: 100px;
border-radius: 50%;
transition: all 1s;
-webkit-transform: scale(0.7);
-webkit-transform-origin: center center;
-webkit-animation-duration: 800ms;
-webkit-animation-name: pulsate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
.ball:hover {
-webkit-transform: scale(2);
-webkit-animation-play-state: paused; /* transition works but gets reset at the end*/
/*-webkit-animation: 0;*/ /* transition works only one time, and no smooth transition on mouse out */
}
jsFiddle Demo
The result is pretty close but as soon as the ball finishes expanding on hover, it suddenly becomes small again (don't understand why). I also tried disabling the animation via -webkit-animation: 0; instead of pausing it but it doesn't work well either.
I tried a different approach that uses keyframes only (no transitions) by attempting to call a different keyframe set on hover:
#-webkit-keyframes pulsate {
from {
-webkit-transform: scale(0.7);
}
to {
-webkit-transform: scale(0.8);
}
}
#-webkit-keyframes expand {
to {
-webkit-transform: scale(2);
}
}
#-webkit-keyframes shrink {
to {
-webkit-transform: scale(0.7);
}
}
.ball {
background: blue;
width: 100px;
height: 100px;
border-radius: 50%;
transition: all 2s;
-webkit-transform: scale(0.7);
-webkit-transform-origin: center center;
-webkit-animation-duration: 800ms, 800ms;
-webkit-animation-name: shrink, pulsate;
-webkit-animation-iteration-count: 1, infinite;
-webkit-animation-direction: normal, alternate;
-webkit-animation-timing-function: ease-in-out, ease-in-out;
}
.ball:hover {
-webkit-animation-name: expand;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: forwards;
}
jsFiddle Demo
The ball stays big as long as the mouse is over it but there's still no smooth transition when the mouse moves away from the ball. I expect it to play the shrink animation instead but it doesn't.
Am I missing something or this is impossible to implement with just pure CSS at the moment?
// Related thread but didn't work for me: Stop animation and start transition on hover
You need to add an animation delay to allow the transition to complete because it reverts back to scale(.7) at the start of the animation. Updated jsFiddle
-webkit-animation-delay:1s;
EDIT
I realized that the answer I posted here was not fully correct. True, the delay animated the transition from big back to small, but if you hover over the pulsing ball when its expanded it jumps back to it's 0 value of .7 before animating to the large scale.
Updated Demo
I came up with a fix that just uses some javascript to fix it based on this article. You do have to change the CSS a little, but it's not very noticeable in the outcome. Here is the updated code
/* CSS */
body {margin: 100px;}
#-webkit-keyframes pulsate {
0% {
-webkit-transform: scale(0.7);
}
50% {
-webkit-transform: scale(0.8);
}
100% {
-webkit-transform: scale(0.7);
}
}
.ball {
background: blue;
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-transform: scale(0.7);
-webkit-transform-origin: center center;
transition: all 1s;
}
.ball.animated {
-webkit-animation-duration: 1600ms;
-webkit-animation-name: pulsate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
/* Javascript */
var ball = document.getElementsByClassName('ball')[0],
pfx = ["webkit", "moz", "MS", "o", ""],
hovered = false;
function AnimationListener() {
if(hovered)
{
ball.classList.remove('animated');
ball.style.webkitTransform = 'scale(2)';
ball.style.transform = 'scale(2)';
}
}
function TransitionListener() {
if(!hovered)
{
ball.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(ball, "AnimationIteration", AnimationListener);
ball.onmouseover = function() {
hovered = true;
}
ball.onmouseout = function() {
hovered = false;
PrefixedEvent(ball, "TransitionEnd", TransitionListener);
ball.style.webkitTransform = 'scale(.7)';
ball.style.transform = 'scale(.7)';
}
Just update this CSS rule, I have added From & To - in Expand & Shrink:
#-webkit-keyframes expand {
from {
-webkit-transform: scale(1);
}
to {
-webkit-transform: scale(2);
}
}
#-webkit-keyframes shrink {
from {
-webkit-transform: scale(2);
}
to {
-webkit-transform: scale(1);
}
}