How can I increase the delay between my infinite lopping CSS animation? - html

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.

Related

Is there a way to slow down a gif as a background in html and css?

I'm making a website for school. As a background of the first page I chose a gif. But the gif is too fast. Is there some attribute or a way to slow down the gif. Maybe there is something I can type in css to slow it down?
You need to resample the gif to change the speed of it.
I haven't tried this tool, but perhaps it will be of help to you: http://ezgif.com/speed
Unfortunately, there is no way to directly control the animation of a GIF with only HTML/CSS.
However, the answer to your other question is "yes" - there are ways to slow down your GIF, or even enable complete CSS control of the animation, with a little help from an image editor.
If you're willing to use an image editor, such as the excellent and free GIMP, then there are some simple solutions to this problem. No experience necessary.
The Simple Problem/Solution
When you really just need to change the GIF speed and don't really need to control it with CSS.
Open your GIF file with GIMP.
In the "Layers" panel, change the layer display duration to whatever you need for each layer. It is displayed like this: (40ms). Just double click the name and enter your new time (80ms if you want to slow it down to half speed in this example), then press enter.
Export as a GIF!
The Complex Problem/Solution
When you do need dynamic control of the animation using CSS.
Overview: We'll convert the GIF into a PNG spritemap, make it the background-image of our HTML element, then use a basic CSS animation to move the frames in steps. With this we gain full control over animation easing, duration, and delay. The code below shows a basic example of the result, followed by a detailed breakdown.
HTML
<div class="slowme"></div>
CSS
.slowme {
background: url("url-for-spritemap.png") 0 0 no-repeat;
background-size: 2400%;
animation: anim-ss steps(23) 1s infinite;
}
#keyframes anim-ss { 0% {background-position: 0%;} 100% {background-position: 100%;} }
Detailed Explanation
Convert the GIF into a spritemap. You can do this completely manually, though it is tedious if the GIF has many layers. (See manual and automatic spritemap solutions at the bottom for detailed instructions.)
Set the spritemap as the background image of a div.
Set the background-size attribute to be a 100% multiplied by your number of frames. In this example, I have 24 frames, so background-size is 2400%. This changes the size of the image relative to the width of your div so that each "frame" of the spritemap is the width to fill the div.
Add a basic keyframes animation to your CSS (code below) to control the position over time. This will move the background image from right to left over the course of the animation.
Set the animation for the div including the steps() for the animation-timing-function property. Set the steps to be the number of frames minus 1. Since we have 24 frames in this example, we'll use steps(23). Without the steps, the image background would slide smoothly, the steps move the background in step with frame widths.
That's it!
The animation should look exactly like the GIF did, except now you can control it like a standard CSS animations.
Control Examples
/* Slow the animation (by increasing duration) to half */
animation: anim-ss steps(23) 2s infinite;
/* Delay the animation start by 5 seconds */
animation: anim-ss steps(23) 1s 5s infinite;
/* Pause the animation (can use to pause/play with a JS button) */
animation-play-state: paused;
/* Play animation in reverse */
animation: anim-ss steps(23) 1s 5s infinite reverse;
I know this was a lot of extra information, but I really hope it helps someone out there!
Detailed GIMP Instructions
Please Note: These instructions are correct at time of writing, using GIMP v2.10. If they fail you, future reader, please refer to the GIMP documentation.
Manual Spritemap Conversion
Increase the canvas width to make room for all frames. So if the GIF is 219x219px, and there are 10 layers (frames) then change the canvas width to 2190px.
Image > Canvas Size
Set your grid to allow for easy snapping.
View > Show Grid
View > Snap to Grid
Image > Configure Grid
Set the horizontal and vertical spacing to your frame dimensions.
On each layer, move the contents to the respective grid position. So the base frame image is in the leftmost slot, then frame 2 (in the 2nd layer) is directly to the right, and so on.
Click on the layer of the frame you're moving in the Layers panel to select it.
Select the "Move Tool" by pressing M.
Select the contents of the layer with ctrl/cmd-a then drag them to the correct grid position.
Export as a PNG: File > Export As , then change the file extension to PNG and export.
Automatic Spritemap Conversion
A simple GIMP plugin created by Spydarlee will automate the whole process for you.
Download that file (or create a script.py file yourself and paste the code into it).
Paste/move the script into your plugins folder.
To find the plugins folder location in GIMP: Edit > Preferences > Folders > Plug-ins
Restart GIMP to load the plugin.
Open the GIF in GIMP.
Use the plugin: Filters > Animation > Create Spritesheet
Change "Output to a single row?" to "Yes" and then click "Ok". All Done!
No.. Never. Because the gif is an image type. You can consider it as a set of image that rapodally change. The movement is not made by the CSS animation so can not control if using CSS. Find another image or make own CSS animation.

Stop animating of a SVG file - Code snippet included

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

What should i do so that the animation changes the position of the element forever?

Every time the animation completes its duration... It returns to its original position... How to solve that problem? I want that my element keeps the position it required after animation without using Java.
Use animation-fill-mode property
animation-fill-mode:forwards;
http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

making a #keyframe animation last the whole time the user stays on webpage in CSS

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.

Is there a way to create a non-stop spinning square using html and css?

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.