I know I can do a zoom animation in CSS, when hovering a button for example.
But I was wondering if I could make the zoom animation based on a specific timer.
Like a short zoom in and zoom out animation during 0.5s, which comes back every 5 seconds.
Something like the button on this URL https://www.laboutiquetrend.com/collections/produits/products/epilateur-corporel-2-0 (scroll a bit to make it appear)
Again, it would help if this is only CSS, since I apply custom CSS on the elements of a theme.
Let me know thanks :)
I made some modifications, it's now pure CSS however it's a bit poor.
* {
margin: 0;
padding: 0;
}
div {
background-color: #ccc333;
width: 300px;
height: 90px;
margin: 20px auto;
animation-name: pulse;
/*animation-fill-mode: both;*/
animation-duration: 2s;
animation-iteration-count: infinite;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
15% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
30% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
#keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
15% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
30% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
<div></div>
Why, when i moving mouse pointer animation seems to be all-fluent, but if i am not, it is fluent partially (to the half of duration, precisely).
Example (with mouse moving):
Example without moving mouse:
It seems that it waits for end of the animation, and then the picture is showed.
The code which i am working on i present below:
<div class="flip-container-off">
<div class="flipper">
<div class="front">
<div class="image">
<img id="login_image" src="{{ baseUrl }}public/images/login_page/login.png">
</div>
<img id="car1" src="{{ baseUrl }}public/images/login_page/car.png">
<img class="cloud-animation" src="{{ baseUrl }}public/images/login_page/cloud.png">
</div>
<div class="back">
<div class="image">
<img id="login_image" src="{{ baseUrl }}public/images/login_page/payment_required_logo.png">
</div>
<img class="cloud-animation" src="{{ baseUrl }}public/images/login_page/cloud.png">
</div>
</div>
</div>
And the css for it:
.flip-container-on .flipper, .flip-container-on .flipper {
-webkit-transition-delay: 1.5s;
transform: rotateY(180deg);
}
.flip-container-on, .front, .back {
width: 320px;
}
/* flip speed goes here */
.flipper {
transition: 2s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg);
}
/* back, initially hidden pane */
.back {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
And a bit of JQuery:
$(function () {
setTimeout(function () {
$('.flip-container-off').addClass('flip-container-on');
$('.flip-container-off').removeClass('flip-container-off');
},1000);
});
Fiddle:
https://jsfiddle.net/fk2xt8a9/
###################################
EDIT:
I have found the problem, I have got the cloud animation, and this animation interfere with flip animation in some way.
Example:
Code for that cloud i present below:
#media (min-width: 820px) {
.cloud-animation {
display: initial;
left: 52px;
position: absolute;
top: 101px;
animation: animationFrames linear 90s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 90s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 90s;
-moz-animation-iteration-count: infinite;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 90s;
-o-animation-iteration-count: infinite;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 90s;
-ms-animation-iteration-count: infinite;
-ms-transform-origin: 50% 50%;
-webkit-transition-delay: 2s;
transform: rotateY(180deg);
}
}
#keyframes animationFrames {
0% {
transform: translate(0px, 0px);
}
50% {
transform: translate(400px, 0px);
}
100% {
transform: translate(0px, 0px);
}
}
#-moz-keyframes animationFrames {
0% {
-moz-transform: translate(0px, 0px);
}
50% {
-moz-transform: translate(400px, 0px);
}
100% {
-moz-transform: translate(0px, 0px);
}
}
#-webkit-keyframes animationFrames {
0% {
-webkit-transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(400px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
}
}
#-o-keyframes animationFrames {
0% {
-o-transform: translate(0px, 0px);
}
50% {
-o-transform: translate(400px, 0px);
}
100% {
-o-transform: translate(0px, 0px);
}
}
#-ms-keyframes animationFrames {
0% {
-ms-transform: translate(0px, 0px);
}
50% {
-ms-transform: translate(400px, 0px);
}
100% {
-ms-transform: translate(0px, 0px);
}
}
I don't have any idea why it is interfering, but is someone has some idea, i would appreciate it :)
Updated Fiddle: https://jsfiddle.net/fk2xt8a9/1/
(Please run that by run button, place cursor on the html editor and don't move please, because only then the problem occurs)
###################################
POSSIBLE WORKAROUND:
I have improved my code and solved my problem using Jquery:
I put .cloud-animation-off instead of .cloud-animation class
I made setTimeout inside previous setTimeout to exchange these classes to run my animation during flip animation
that caused no interference in both animations :)
Preview:
Example fiddle: https://jsfiddle.net/fk2xt8a9/2/
I tried and wrote this code but it have a problem, first issue is text inside div will be fuzzy (fluffy)! and second scale animation not play softly, all i want is play animation softly, scale once then rotate infinite on hover.
#-webkit-keyframes socialspin {
from {
-webkit-transform: scale(2) rotate(0deg);
-moz-transform: scale(2)rotate(0deg);
-ms-transform: scale(2) rotate(0deg);
-o-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
to {
-webkit-transform: scale(2) rotateY(90deg);
-moz-transform: scale(2) rotateY(90deg);
-ms-transform: scale(2) rotateY(90deg);
-o-transform: scale(2) rotateY(90deg);
transform: scale(2) rotateY(90deg);
}
}
Here is JSFiddle Demo
The best way to have a smooth result is not to have a zoom in (scale=2) but a zoom out (scale=0.5), but of course in the opposite state.
And I don't believe that what you want can be achieved with a single animation. I have used 2 elements, and one handles the rotation and the other the scale
#container {
width: 400px;
height: 400px;
}
#container:hover {
-webkit-animation: socialspin 5s linear 0s infinite alternate;
}
#-webkit-keyframes socialspin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotateY(90deg); }
}
#keyframes socialspin {
from { transform: rotate(0deg); }
to { transform: rotateY(90deg); }
}
#base {
width: 400px;
height: 400px;
background: yellow;
transform: scale(0.5);
transition: transform 5s;
transform-origin: top left;
font-size: 200%;
}
#container:hover #base {
transform: scale(1);
}
<div id="container">
<div id="base">
<br>
<br>
<br>
HELLLLOOOO!!!
</div>
</div>
We cannot, as of yet, completely make the font clear. This is because you are using an animation. If there was no spinning, the text would not be fuzzy. However, we can try using several font smoothing properties to try and combat this. None of them are very good but they do improve legibility slightly.
Regardless, here is the fix for the second part:
I found a hack. This will remove the blur during the rotation but not during the scaling up.
.square {
width:100px;
height: 100px;
background-color:black;
margin: 50px;
}
p {
-webkit-font-smoothing: antialiased;
color:white;
text-align: center;
padding-top: 35px;
}
.square:hover {
-webkit-animation: scale 1s linear 0s 1, spin 1s linear 1s infinite alternate;
}
.square:hover p{
-webkit-animation: scaletext 1s linear 0s 1;
}
#-webkit-keyframes scale {
from {transform: scale(1); }
to{transform: scale(2);}
}
#-webkit-keyframes scaletext {
from {transform: scale(1); }
to{transform: scale(1);}
}
#-webkit-keyframes spin {
from {transform: rotateY(0deg) scale(2) ;}
to {transform: rotateY(90deg) scale(2);}
}
<div class="square">
<p>Some text</p>
</div>
(I removed the prefixes to condense the answer)
here is the example and the point is first to describe all features in the main div as defaults because animation uses main elements rules to calculate time etc.
and second point here you used 90 degrees to turn but a complete turning back can be done by 180 degrees which is the angle of a line
here is the code
--update--
here is the exxample you can see scale animates the problem was in your animation scaling started from 2 and ended by 2 so there was no animation for that
--update--
here we go if you run transition first and by the time while transition is running make animation wait by delay time of animation it works fine you can see here
div {
width: 200px;
height: 200px;
background: yellow;
-webkit-transform:scale(1) rotate(0);
transform:scale(1) rotate(0);
margin-left:200px;
margin-top:50px;
transition:-webkit-transform .5s linear;
transition:transform .5s linear;
}
div:hover {
-webkit-transform:scale(2) rotate(0);
transform:scale(2) rotate(0);
-webkit-animation: socialspin 5s linear .5s infinite alternate;
-moz-animation: socialspin 5s linear .5s infinite alternate;
}
#-webkit-keyframes socialspin {
from {
-webkit-transform: scale(2) rotate(0deg);
transform:scale(2) rotate(0deg);
}
to {
-webkit-transform: scale(2) rotateY(180deg);
transform: scale(2) rotateY(180deg);
}
}
Is there a way to stop constant firing of animation during initial hover? I'm trying to execute a css animation on an icon during hover. When I move the mouse over the element the icon bounces erratically until I stop moving the mouse and sometimes hangs during the animation. I understand that the animation is firing on the initial hover until I stop but I'd like the effect to fully run once and stop unless I hover off.
HTML
<div class="box">
<img src="imagename.png" />
</div>
CSS
a {display: block;}
.animate {
-webkit-animation-duration: .9s;
animation-duration: .9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounce {
0%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10% {
-webkit-transform: translateY(-25px);
transform: translateY(-25px);
}
20% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
30% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
60% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#keyframes bounce {
0%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
10% {
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
20% {
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
}
30% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
60% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
.bounce:hover,
.bounce:focus {
-webkit-animation-name: bounce;
animation-name: bounce;
}
I've attached a jsfiddle of the result I'm getting.
http://jsfiddle.net/jordan911z/M3vZ2/
The animation-play-state property can pause or resume an animation. It accepts either:
running — the default; an animation plays as normal
paused — the animation is paused
#myelement:hover, #myelement:focus {
animation-play-state: paused;
}
See full tutorial on SitePoint.
Try add this to your CSS
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari and Chrome */
I am trying to make a background image smoothly fade in when the class is added and fade out when the class is removed (to a div).
My current CSS (tested in Firefox only)
background : url("/PmDojo/dojox/widget/Standby/images/loading.gif");
-moz-transition : background 0.5s ease-in-out;
background-repeat: no-repeat;
background-position: 65px center;
background-size: "contain";
But what that does is show the image fade in and move to the center from the left. I want it to already be in position when the fading in happens. How?
Hard to tell without seeing your class and javascript but, from my experience with css3 transitions and animations - all of the elements in the class with the transition/animation on it are taken into effect. So you will want to have two classes to seperate the static css properties from the animating ones. Put these properties on another class for that div which is always present:
-moz-transition : background 0.5s ease-in-out;
background-repeat: no-repeat;
background-position: 65px center;
background-size: "contain";
Then just toggle the class which has the animation properties:
background : url("/PmDojo/dojox/widget/Standby/images/loading.gif");
So when you change the class you have say "defaultClass" class to start and then change it to "default animationClass" for toggling the animation/transition. Hope that helps?
Try this link with this answer. Also check out this answer, cause it may well be possible to do this with jquery.
If not, last resort may be to just position an image with z-index below all your other layers and then animate it as a regular DOM element.
maybe the question is closed, but i'll try to post my answer
this code should work, just use your own bg.jpg
<html>
<head>
<title>some title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><style>
#bg {
-moz-animation: bg 60s linear infinite;
-webkit-animation: bg 60s linear infinite;
-o-animation: bg 60s linear infinite;
-ms-animation: bg 60s linear infinite;
animation: bg 60s linear infinite;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
/*backface-visibility: hidden;*/ //ORIGIN
backface-visibility: visible;
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/* Set your background with this */
background: #348cb2 url("images/bg.jpg") bottom left;
background-repeat: repeat-x;
height: 100vh;
left: 0;
opacity: 1;
position: fixed;
top: 0;
}
#-moz-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
#-webkit-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
#-o-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
#-ms-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
#keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
#bg {
background-size: 2250px auto;
width: 6750px;
}</style>
</head>
<body>
<div id="bg"></div>
</body></html>