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
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.
So I have list of items in my page and a WebSocket connection to backend that receives new items and inserts them into my list. I want newly-inserted items to display with background color transition that lasts a second or two.
How do I go about creating a CSS style that transitions background color but does so for only a second or two when it is first rendered?
CSS by itself can not trigger an animation for newly created items, this you have to do from JS when you add the element - or using a MutationObserver to listen to such an event.
One method could be to define the animation in CSS and then add the corresponding class using JS when the element is created. Or just define a transition for the background-color in CSS, but change the CSS background-color property from JS.
A third option, depending on if you use a framework or what kind of framework you use, may be to just do the animation using JS.
keyframe
use a class css with an animation property that lasts until 2. the keyframe will allow you to transition from the backgroun
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.
If I apply 2 tweens at the same element it will not Tween. Why? Or am I doing something wrong?
_input.tween('opacity', 1);
_input.tween('height', '100px');
// nothing happens
But both work individually.
Fiddle
Element.prototype.tween is an abstraction of Fx.Tween, which creates a new Fx.Tween instance on that element and binds to a single property at a time.
http://mootools.net/docs/core/Fx/Fx.Tween#Element-Properties:tween - you are instatiating two tweens which probably interfere with each other since iirc, the element getter/setter can only work with a single instance - which goes into Element Storage.
you want to use morph instead - http://mootools.net/docs/core/Fx/Fx.Morph and pass an object, i.e.
_input.morph({
opacity: 1,
height: 100
});
morph was meant to modify multiple properties on the same element object on a unified timer.
you could manually do new Fx.Tween(_input, ... ) twice and it will work but it may not be 100% on the same clock for the animation so it may seem choppy
I've got a simple fiddle running a Tween animation using MooTools Fx.Tween and I can't seem to get the onComplete option to fire after the initial animation stops. For whatever reason, it always wants to fire in the middle. What am I doing wrong?
Fiddle
It seems you're doing it right.
I think there's a problem (basically, a 'conflict'.. you can use css transition OR js animation, not together) with -webkit-transition: all 1s linear 0 inside #bar . By commenting/removing it, it's working properly -> http://jsfiddle.net/vPuAR/