I want to create a non-stop spinning square using html and css. I currently have:
#-webkit-keyframes spinnow {
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes spinnow {
100% {
transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
#-ms-keyframes spinnow {
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
}
What I have currently got will make the square spin, but it will always stop after one full rotation, then start shortly afterwards. How do I make it continuously spin without stopping?
N.B. I'm using #-webkit-keyframes, #-moz-keyframes and #-ms-keyframes.
Thanks very much,
Lucas
It has nothing to do with the definition of the animation, but with its usage:
.foo {
animation: 5s spinnow infinite linear;
}
The infinite keyword is what you need. You can also put an integer there, to have a finite number of rotation cycles.
Edit by OP: For future visitors, the linear keyword is to make the animation not speed up and then slow down using the swing animation, but rather use a linear, smooth approach, so that the speed is distributed and does not make the square appear to stop. This keyword was the important one for me - I had the infinite keyword already.
http://jsfiddle.net/GXPS8/
My guess is that the existing code goes through rotation of 360 degrees, then 0 degrees, then rotates back to 360 degrees again.
The stop you perceive may be due to the animation rendering the same rotation twice (360 degrees = 0 degrees).
EDIT: not pure HTML+CSS as OP is trying to do, but it may address the fluidity issue.
Calculating the amount of rotation to do via a formula similar to this should do the trick:
var rotation=0;
...
function _RotateStep(){
rotation=(rotation+1)%360;
//apply rotation to element (via method of choice)
setTimeout("_RotateStep()",250); //or time between rotation steps of your choice
}
In Pure CSS, you may be able to get away with setting it to rotate to 359 degrees continuously, eliminating the duplicate rotation being rendered.
Related
I've seen this discussed before, but it is usually for an animation that has 1 stop point and end point. Since the arrow in my example is bouncing https://5pshomes.artrageousdemo.com/ I am a bit confused on how this would work.
How can I add a few second delay between each iteration of the animation, while keeping the animation itself 2 seconds long?
.fl-icon-wrap{
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
animation-delay: 2s;
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
Thanks,
When setting animation-iteration-count to infinite, the animation will repeat forever. There is no native way to increment the time between two iterations.
You can, however, increase the time in between the moment the element starts being "animated" and the effective start of the animation, by setting animation-delay property. But this delay is only applied before the first iteration, not in between consecutive iterations.
To achieve your desired result you have two methods:
modify the animation so that the delay you want is contained within the animation loop (this is the most common way to do it). With this technique, the pause is set to a percentage of the entire animation iteration so you can't decouple the speed of the animation from the time between actual element animations.
apply the animation using a class and write a small script which applies and removes that class at the appropriate times. This technique has the advantage of decoupling the duration of the animation from the time between applications and it's useful especially if the animation-iteration-count is set to 1. Also note using this technique animation-delay applies each time you apply the class, if you have set it to a valid truthy value.
Technically, there would be a third way, which would be to set the animation-play-state to running/paused, using JavaScript, at the appropriate times, similarly to the second method. But, in practice, if for any reason this goes out of sync with the actual animation, it might get to the point where it pauses the animation mid-way in the actual animation, resulting in a "buggy" behavior, from the user's perspective so option 2 above should always be preferred to this, technically possible, third method.
I'm currently learning front-end and in the course that I am taking (?) , we use transform: translate(-10px, 10px) but, I recently found an independent translate property that works and acts the exact same way. Does it mean that I should stop using transform and use individual properties instead?
According to CSS documentation here:
The translate, rotate, and scale properties allow authors to specify simple transforms independently, in a way that maps to typical user interface usage, rather than having to remember the order in transform that keeps the actions of translate(), rotate() and scale() independent and acting in screen coordinates.
So when you use transform and applies several transform functions (such as translate, scale or rotate), the functions order will effect the visual (which is hard to remember how each function effects the others).
When you use individual transforms you don't have to deal with it and the order doesn't matters.
No You Should not stop using it! as Sometime you may find it Better than using Individual property, In Some Cases.
Transform Property
The transform CSS property lets you rotate, scale, skew, or translate an element.
transform: translate(120px, 50%);
transform: scale(2, 0.5);
While Simply Translate
allows you to work with horizontal and vertical direction
transform: translate(100px, 200px);
transform: translate(100px, 50%);
So, With transform you can do multiple things in one line of code like Scale, Translate ,Rotate etc.
and simply Translate allows you to work in horizontal and Vertical direction.
Priority is given more to the individual Property i.e translate Here. Overriding of property can be Done
I think transform: translate(x,y); is the best way to move anything from its position. I did not hear about direct translate attribute which works.
I am using a SVG image and animating the path of a diagram. It works fine. However, Once the image has been drawn I need to stop the iteration (stop from the image being redrawn). The code is found in this CODEPEN snippet attached here.
I tried removing infinite from animation in the CSS file, but the drawn image is being removed.
What I want to do is:
1.) Animate the image as shown in the code.
2.) Stop the animation from reanimating (this is because of the infinite attribute used in the animation)
3.) Once the image has been drawn, the image should remain the same unless the user refreshes the page.
Change this line:
animation: draw 10s infinite linear;
to this:
animation: draw 10s forwards;
The forwards fill mode works as follows: After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended
If I rotate a div having set the origin and then set the origin to something else and apply another rotation, only the second rotation is seen.
I understand that this is because that rotations are always done from the element's original position without transformations applied.
How would I perform a second rotation so that it is applied relative to the first rotation but with a new origin?
Okay I finally found a way to achieve what I wanted. You have to manually change the origin by translating and combine all transformations into one call to transform so that the translations and rotations create one transformation matrix and are therefore cumulative.
So for example if you want to rotate 30deg around 12,32 and then 20deg around 100,78 you would do:
#element{
transform: translate(-12,-32) rotate(30deg) translate(12,32) translate(-100, -78) rotate(20deg) translate(100, 78);
}
I was wondering how i would create a #keyframe animation that lasts the whole time that the user is on my webpage?
I have set several animations with colour on my website that are all set over a certain period of time, i would really like to know how to make these last the whole time.
Here is my current CSS;
#keyframes goldwhite {
0% {color:whie;}
80% {color:gold;}
100% {color:white;}
}
#bannerleft {
animation:goldwhite 2s;
-webkit-animation:goldwhite 2s;
position:absolute;
margin-top:-2.3%;
font-size:13px;
color:white;
width:130px;
left:18%;
font-weight:600;
}
So if it is possible how would i change this animation to last the whole time ?
My second question for anyone who knows is how would i create the text effect that is used on the apple IOS 7 lock screen, the part that says 'Slide to unlock' which changes effect from plane grey to silver, its hard to explane but it shows it here a little starting at 10 seconds.
http://www.youtube.com/watch?v=8ix7HnH_6cQ
Maybe this effect is on repeat ? as i would like for it to happen multiple times or once every 5 secconds .
Thankyou for your help
You will need javascript/jquery to do this.
When the animation ends, you can capture the event and reset the class. Something like this:
$("#MyDiv").on("webkitAnimationEnd oanimationend msAnimationEnd animationend",
function ()
{
$(this).removeClass("bannerleft");
$(this).addClass("bannerleft");
});
Caveat...I have used the animation end events but not quite like this. You may need to move the animation stuff to a separate class.