I use this code to create a blinking zoom-in and zoom-out image, but it only zoom-in and after that, it reset image and again zoom-in.
#keyframes blink {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
img {
transition: .3s ease-in;
animation: blink 1s;
animation-iteration-count: infinite;
}
JSFiddle
Easy solution would be:
#keyframes blink {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
img {
transition: .3s ease-in;
animation: blink 1s;
animation-iteration-count: infinite;
}
So you just need in the end of animation make image same position as it is at start. : )
You have to animate it to the start point again. Like this:
#keyframes blink {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
img {
transition: .3s ease-in;
animation: blink 1s;
animation-iteration-count: infinite;
}
Related
When i'm hovering an img, i want it to rotate. My problem is when i hover the img it rotates but if i stop hovering it, it just goes to how it was initially, it doesn't continue the animation... I want the img to rotate when hovering it and continue even if i mouve the mouse out of the img. Also no JS please, I only want to use CSS
ps: Sorry for my bad english, I'm french :P
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
img:hover{
animation-name: Animation;
animation-duration: 1s;
}
This will work:
#keyframes rotation {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
img:hover{
-moz-animation: rotation .6s infinite linear;
-moz-border-radius: 100%;
-o-animation: rotation .6s infinite linear;
-webkit-animation: rotation .6s infinite linear;
-webkit-border-radius: 100%;
animation: rotation .6s infinite linear;
}
<img src="https://www.gravatar.com/avatar/1ebceb30742d4815e63f649cbb853834?s=32&d=identicon&r=PG&f=1">
I have this css :
.yellowText {
color: #FFFF00;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
transform: rotate(-20deg);
}
.pulse {
-webkit-animation: text-anim;
animation: text-anim 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
#keyframes text-anim {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
Then, I apply it to a text :
<p class="yellowText pulse">Some text here</p>
But now, the text is well-animated, without being rotated by -20°... Any idea of what could be wrong ? I believe this is a problem with the transform property not working with the animation one. Also, what I tried was putting the transform inside the #keyframes text-anim, but what this does is just periodically rotating the text, having it perfectly right the rest of the time...
Thanks in advance for your help !
PS : forgive my bad English, I'm French :P
Your #keyframes are overriding you original transform property.
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1 rotate(-20deg); }
50% { -webkit-transform: scale(1.1) rotate(-20deg); }
100% { -webkit-transform: scale(1) rotate(-20deg); }
}
#keyframes text-anim {
0% { transform: scale(1) rotate(-20deg); }
50% { transform: scale(1.1) rotate(-20deg); }
100% { transform: scale(1) rotate(-20deg); }
}
Why isn't transform: scale(0); working on a animated element?
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#box {
width: 150px;
height: 150px;
background: red;
animation: spin .5s infinite linear;
transform: scale(0);
}
I guess its because the keyframe take over transform, but even with !important after transform: scale(0) its still not changing.
http://jsfiddle.net/yun0xu8t/1/
You need to move transform: scale(0); to #keyframes
To rotate and scale together
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg) scale(0); }
}
I have been working on an animation of a ball rolling and falling off an edge. First, I made a version which just rolls, and then stops. Working fine. But then, when I added the falling animation to the same code, it doesn't roll it, and I can't do anything about it.
Here is the first snippet:
#-webkit-keyframes roll{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
100% {
-webkit-transform: translateX(480px) rotate(360deg);
}
}
then the second:
#-webkit-keyframes rollandfall{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
50% {
-webkit-transform: translateX(480px) rotate(360deg);
}
85% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translate(480px, 400px) rotate(360deg);
}
95% {
animation-timing-function: ease-out;
-webkit-transform: translate(480px, 380px);
}
100% {
animation-timing-function: ease-in;
-webkit-transform: translate(480px, 400px);
}
}
(I know it's only for safari and chrome, but I want to finish it before making it accessible in every browser)
And here is the link to the animation.
Thanks for any help!
EDIT:
It seems it wasn't exactly clear what I want it to do, so
here you can check out what the first snippet does.
A better way, seems to 'chain' the animations:
#goRight img:hover{
-webkit-animation: roll 1s, fall 1s;
-webkit-animation-delay: 0s, 1s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes roll{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
100% {
-webkit-transform: translateX(480px) rotate(360deg);
}
}
#-webkit-keyframes fall{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(480px);
}
100% {
-webkit-transform: translateX(480px) translateY(400px);
}
}
Much cleaner!
disclaimer: I'm no expert in CSS3, but after some tweaking, this seems to work... ish.
#-webkit-keyframes rollandfall{
0% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(0px) rotate(0deg);
}
5% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(48px) rotate(36deg);
}
25% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(240px) rotate(180deg);
}
30% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(284px) rotate(216deg);
}
50% {
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateX(480px) rotate(360deg);
}
100% {
animation-timing-function: ease-in;
-webkit-transform: translate(480px, 400px) rotate(360deg);
}
}
I've created some smaller increments, to tell the engine it should animate in a certain direction; if you put 180deg half way, it seems to roll in the opposite direction.
Needs some tweaking for a smoother animation, probably.
Is there a way to slow down a hover effect? I have a hover effect on my site (removed) that displays text on hover of the images. I want to slow down the effect by a little. It's a tad jarring how quickly the picture switches over.
How would I do that?
You could add css3 transitions:
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
It depends on how you're displaying the text. If you're changing a CSS property you can do this with CSS3 transitions. Below is an example.
HTML:
<div id="A"></div><div id="B"></div>
CSS:
div {
height: 100px;
width: 100px;
position: absolute;
top: 0;
left: 0;
-moz-transition: opacity 4s; /* Firefox */
-webkit-transition: opacity 4s; /* Safari and Chrome */
-o-transition: opacity 4s; /* Opera */
transition: opacity 4s;
}
#A {
background: red;
opacity: 1;
z-index: 1;
}
#B {
background: blue;
opacity: 0;
z-index: 2;
}
#B:hover {
opacity: 1;
}
Demo
Edit: David Thomas has told me that you cannot change the display with transitions. I have updated the above to use opacity.
I know this is quite a bit late but look into CSS3 animations. I use an animation on one of my Garry's Mod loading screens.
/* Styles go here */
button {
margin-left: 50%;
margin-right: 50%;
}
button:hover {
-webkit-animation: breathing 5s ease-out infinite normal;
animation: breathing 5s ease-out infinite normal;
}
#-webkit-keyframes breathing {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes breathing {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
50% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<p>Below I have a button that changes size on mouse hover useing CSS3</p>
<button>Hover over me!</button>
</body>
</html>
I know it's not quite the result your looking for but I'm sure you and others can find this useful.
If you'd like, you could use jQuery .fadeIn() http://api.jquery.com/fadeIn/
.fadeIn( [duration] [, callback] )
duration string or number determining how long the animation will run.
callback function to call once the animation is complete.