I've tried searching for a way to make text appear after 10 seconds. I'm creating a loading screen for a forum I'm working on. I need to make text appear after 5 seconds of loading that says Continue, this of course is going to be a button/link. I've tried using css to animate the text to appear after 5 secs.
animation: 5 secs;
but this doesn't work for some reason. I would also appreciate help in this.
Animation delay should work
{ animation-delay: 5s; }
Related
I need some help if someone can help
I have many lines with fadeout animation with different seconds and I need the first line start over after the last line animation ends
Partly for funsies, and partly for a design idea I had, I'm trying to convert an animated gif into pure animated CSS.
It's very nearly working but I've hit a snag and am unsure what is causing my issue, or how I could fix it. I have an unfortunate suspicion that I've simply hit a limitation of the technology.
The gif I've been using for testing is this: https://us.v-cdn.net/5018289/uploads/editor/yj/lcdjneh1yoxv.gif
As for the actual CSS, I've been trying to implement the method here (animated box-shadow properties), as it seemed like the most feasible: https://codepen.io/andrewarchi/pen/OXEEgL
#ash::after {
animation: ash-frames 0.4s steps(1) infinite;
}
#keyframes ash-frames {
0% {box-shadow: 32px 8px #181818, 40px 8px #181818,...}
...
}
The animation seems fairly seamless in the given example, so I figured it was worth a try. Obvious differences: the gif I'm using has more frames and more pixels.
And just as a quick overview, my CSS (I am using vendor tags etc, this is just an example):
.pixel-art-3940::after {
animation: pixel-art-3940-frames 1s steps(5, end) infinite;
}
#keyframes pixel-art-3940-frames {
0% {box-shadow: 112px 68px rgba(77, 69, 64, 1),...}
16.666666666666668% {box-shadow:115px 65px rgba(77, 69, 64, 1),...}
...
}
The animation does seem to be actually working, however there's an intense 'flickering' effect on the animation. See below:
I've tried the usual solutions to 'flickering transitions' in Chrome - such as setting -webkit-backface-visibility to hidden - but so far nothing has solved the issue.
As I said, I fear I've simply hit a limitation of the technology itself. Any ideas what the problem might be, and whether I can solve it?
EDIT: The full source code of this particular animation can be found in these two Gists. I opted for Gists because of the size of the CSS file.
HTML: https://gist.githubusercontent.com/ChrGriffin/2f1f221143e24d3e39cad8e7369bc167/raw/16ea77d21aa79cf9da52fc3477a6773af41130f2/image.html
CSS: https://gist.githubusercontent.com/ChrGriffin/7dcff0f119532ff37f68c01a8a22ecb5/raw/3e49d3dd0b7fa93aef6708750770d2616c53f682/image.css
Correct answer
In the end, it was all due to the animation-timing-function. First param in steps() function is not the number of keyframes (or number of steps in the loop) but the number of steps rendered in between keyframes.
So changing it to steps(1,end) fixes it, as the browser no longer has to calculate intermediary frames (where it obviously fails due to the large number of box-shadow values - there's basically 1 value for each pixel - wicked technique, btw).
See it working: https://jsfiddle.net/websiter/wnrxmapu/2/
Previous answer: (partially incorrect, led to the correct one above - i left it as it might prove helpful to others debugging similar animations):
Initially I thought your exporting tool was... simply wrong.
Why? Because increasing animation-duration from 1s to 100s produced this result.
The apparent conclusion is that your intermediary frames are bugged.
However, I tested each of them individually and, to my surprise, they rendered correctly.
Which leads to the conclusion that the number of box-shadow calculations per keyframe is limited and some sort of clustering algorithm is performed.
Which makes sense, since we're talking box-shadow here, which, in 99.999999999% of cases (basically all except yours) does not have to be accurate. It should be (and obviously is) approximated favoring rendering speed, for obvious reasons: we're talking user experience and "feel". Most users are non-technical and they simply expect smooth scrolling under any and all conditions.
I've come to the conclusion there must be a limit on the amount allowed calculations per keyframe after trying my best at optimizing your code, reducing it to less than half the initial size: https://jsfiddle.net/websiter/wnrxmapu/1/
I wasn't able to find any material on pixel clustering techniques for box-shadow and I don't think much is available online - this should be classified information.
However, IMHO, other than bragging rights, I don't think your technique stands a chance in terms of rendering performance when compared to a gif or svg. Emphasis on "IMHO". If you insist on getting this done, you might want to slice the image up and check if the limit on allowed calculation is per element or per page.
But I wouldn't keep my hopes too high. It is optimizations like the one your code has revealed that make CSS lightning fast. If it had to be accurate it wouldn't be so fast.
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.
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.
Quick question : is it possible to put a refresh less than 1 second in a
My goal is to test the display of images at 1/24 or 1/30 a second to do "moving pictures"...
Thanks again for your help.
Use setTimeout or something like that, and do all of this in one page, because a page cannot load 24 times per second with different images...
You could make effect using something like:
cubic-bezier(0.5, 0.2, 0.3, 1.0))
See http://css-tricks.com/snippets/css/keyframe-animation-syntax/