How to make a spiral unwinding for spinner by css?
For now i have that animation rules:
How am I supposed to change them?
#keyframes spinning {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Related
I'm trying to create a simple animation, an element should do a full spin around a radius(using transform-origin), the problem is that I want that element to begin with an angle.
For a spin that starts from 0deg, I know I can do:
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
But I want it to start with an angle, and this doesn't work:
#keyframes spin {
0% { transform: rotate(45deg); }
100% { transform: rotate(45deg); }
}
I understand why. because its the same point... but how do i do a full spin in this case?
Here's a simplified version of it. I have no problem with mixing this with JS to make it work:
https://jsfiddle.net/shock/qqdkj7hx/
Try the following:
#keyframes spin {
0% { transform: rotate(45deg); }
100% { transform: rotate(405deg); }
}
FIDDLE
I have a set of boxes where each box has an animation:
#keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(0); }
100% { transform: scale(1); }
}
In order to create a waving flag effect, I use the animation-delay CSS property:
.pulsate1 {
-webkit-animation-delay: 2s;
}
.pulsate2 {
-webkit-animation-delay: 2.05s;
}
/* And so on up to pulsate20 */
These pulsateN classes are wrapped around each row of boxes.
There is some occasional flickering using this method, as seen in this fiddle. Is there another better solution?
The flickering occurs because CSS doesn't know what to do with scale of 0. Change it to something low like 0.001 and enjoy your smoothly-waving flag :)
#keyframes pulse {
0% { transform: scale(1) translateZ(0); }
50% { transform: scale(0.001) translateZ(0) }
100% { transform: scale(1) translateZ(0) }
}
(As mentioned by skyline You can add translateZ(0) to take advantage of the GPU)
scale() is a 2D transformation style. Try adding translateZ(0) or translate3d(0,0,0) to the animation. This will trick the browser into thinking it's doing 3D transformations and will offload the work to the GPU if available. I'm not seeing any flickering on Chrome 49.
#keyframes pulse {
0% { transform: scale(1) translateZ(0); }
50% { transform: scale(0) translateZ(0); }
100% { transform: scale(1) translateZ(0); }
}
Here's an article explaining the performance benefits of translate3d: https://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
Ok. I tried to search for this question. and it's very simple. I have a css swing animation working good in firefox but not in chrome. Of course, I added the webkit prefix. but still no luck. I changed the iteration count to infinite and finally it is working, but no I don't want it to run infinitely. Is this really a bug? does anybody find a solution? here's the link to the code I made in jsfiddle .. http://jsfiddle.net/7t1uvyup/2/ and here's the actual code.
.x{
height:50px;
width:50px;
background:#000;
position:fixed;
}
.x:hover
{
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
/* change webkit iteration count to infinite and it will work on chrome but of course with infinite animation */
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#-webkit-keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
<div class="x"></div>
I did some research.. CSS is Hardware-Accelerated..
So this is not just a weird random bug.
I ran into this problem just now. To me it seems that the animation takes place in very short period of time and many times it is not noticable to human eyes; i.e. Chrome does not respect animation duration parameter when webkit-animation-iteration-count is not infinite.
To me it doesn't seem to be a random bug. It is reliably reproducible.
Try visiting http://www.w3schools.com/css/css3_animations.asp with different browsers. Chrome shows the worst performance; CSS3 animation box does not animate; it just stays.
I'm looking at optimising CSS animations for performance.
From what I can find out using
.item { transform: translate(-25px,-50px)
is much more efficient than
.item { left: -25px; top: -50px }
I've setup a little animation that move and rotates a box .balloon which as multiple steps to the animation. The problem is though the animation becomes very jerky, even with positioning ans rotation declared for each step
Here is my standard CSS
#keyframes balloon {
0%,100% { left:809px; top:50px; transform: rotate(0deg) }
10% { transform: rotate(-9deg) }
25%,75% { top:25px }
50% { left:235px;top:75px }
45% { transform: rotate(3deg) }
75% { transform: rotate(12deg) }
}
This is my optimised CSS, which is where the jerky animation comes in to effect
#keyframes balloon {
0% { transform: translate(0,0) rotate(0deg) }
10% { transform: translate(-57.5px,-10px) rotate(-9deg) }
25% { transform: translate(-143.75px,-25px) rotate(-4deg) }
45% { transform: translate(-517.5px,22.5px) rotate(3deg) }
50% { transform: translate(-575px,25px) rotate(4.5deg) }
75% { transform: translate(-287.5px,-25px) rotate(12deg) }
100% { transform: translate(0,0) rotate(0deg) }
}
Is there an alternative solution for this?
I've put a CodePen together here.
In your animation-property, try to add a value for the animation-timing-function
Something like
animation: balloon 15s infinite linear;
would make it more smooth.
I have an onhover animation for a div called logo. I want the logo to tilt when the mouse is hovered over. However, I don't want the logo to go back to it's original state when the animation is finished, until someone moves their mouse out of the element (mouse out).
#logo:hover{
-webkit-animation-name:logorotate;
animation-name:logorotate;
-webkit-animation-duration:0.5s;
}
#-webkit-keyframes logorotate{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(10deg);
}
}
If you want the hover to have a state, and that when someone hovers the change is smooth, that is a transition and not an animation
#logo{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
#logo:hover{
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
Try something like this:
#logo.mousein{
-webkit-animation-name:logorotate;
animation-name:logorotate;
-webkit-animation-duration:0.5s;
}
#-webkit-keyframes logorotate{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(10deg);
}
}
then add following jquery:
$(document).read(function(){
$("#logo").mouseover(function(){
$(this).addClass("mousein");
});
});
(Havn't tested the code yet, but schould work)