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.
Related
In this fiddle I have a small div with an opacity animation.
The animation plays correctly when the state changes to true and the component is mounted
and the div fades in.
However the animation does not play when the component is unmounted when the state goes to false.
I have the animation set as both, and I tried also applying a reverse animation (from 1 to 0) but it just ends up playing right after the first one and I end up with no square.
How can I make this fade animation play in reverse when the component disappears?
Edit:
I did not mention this is done in React.
My solution eventually was to just use a library for animation, which made this efortless.
I'm leaving the question up though in case others have vanilla solutions to the problem.
I've found sort of a hacky way to solve this. You might find something better later on, but for now, this works.
I've created a class .hide which sets opacity to 0 and visibility to hidden, which will be added to the box. The initial insertion animation is the same. But for exiting, I've applied a transition property to the box. When you click a second time, I've wrapped the setVisible() method in a setTimeout(), that has a delay timing the same as the transition duration for .hide.
This will allow the box to fade out first, and then the setVisible() method will be called.
If you don't want to use a setTimeout(), you can add an eventListener to the box for transitionend, and then call setVisible() once that is done.
Here's a fiddle: https://jsfiddle.net/32y8vjus/1/
PS: In the fiddle, I'm changing the background color to show that the transition happens before the box is removed. You can change that to opacity.
I'm curious as to what would be the better approach for a drop shadow in terms of load on the browser: to generate the shadow w CSS or to use a PNG that is 1px tall by 18px wide that would repeat over the height of the container.
I have a background in 2D animation using Flash/Adobe animate and Action Script 2 and 3 and it was easier on the computing to use a PNG instead of the drop shadow that was built in. I'm wondering if the same would be true in HTML/CSS or if the extra http request outweighs what it takes for the CSS to do it. Thoughts?
https://i.stack.imgur.com/OUQVf.png
-cac
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
I have this map of Pennsylvania I'm working on. I currently have a few counties highlighted and on hover it shows the county names. I'd like to add a slight scale increase upon hover. But when set that, it moves the entire path.
Here's a URL to show what's going on. As you hover you'll notice the issue, that's with a scale of 1.2 applied upon hover:
http://ryanharris.works/d/testmap.html
Is there anyway to scale the path but keep it in the same spot? I'm not too familiar with SVG as this is my first practice project.
Any guidance is much appreciated
Take a look at
transform : scale(...);
transform-origin: ... ;
(Need to be prefixed)
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.