How do I make animation like http://fitch.com see the top, right side, bottom and left side. its look like loading..
<!DOCTYPE html>
<html>
<head>
<style>
.topLoader {
width: 100%;
height: 5px;
background-color: #fff;
position: relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-duration: 2s;
animation-name: mytop ;
}
.bottomLoader {
width: 100%;
height: 5px;
background-color: #fff;
position: relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-duration: 2s;
animation-name: mybottom ;
}
#keyframes mytop {
0% {background-color:#000000; left:0px; top:0px;}
100% {background-color:#000000; left:100%; top:0px;}
}
#keyframes mybottom {
0% {background-color:#000000; left:100%; top:100%;}
100% {background-color:#000000; left:0px; top:100%;}
}
</style>
</head>
<body>
<div class="topLoader"></div><br>
<div class="rightLoader"></div><br>
<div class="leftLoader"></div><br>
<div class="bottomLoader"></div><br>
</body>
</html>
demo
Actually, there's no need to manipulate background-color in animation keyframe and both coordinates - for initial hiding of the lines it's enough to set their WIDTH /HEIGHT to 0px and then animate them. For TOP and BOTTTOM lines animate width, while for LEFT and RIGHT ones work with height. For BOTTOM and LEFT lines "left" and "top" coordinates are also animated accordingly, since these lines move out from the opposite horizontal/vertical corners of the screen.
#keyframes mybottom {
0% {width:0px; left:100%;}
100% {width:100%; left:0;}
}
#keyframes myleft {
0% {top:100%; height:0}
100% {top:0; height:100% }
}
Then, add animation-delay for each line, summing up their time of appearing on the screen one after another.
Also add animation-fill-mode: forwards; so the lines don't disappear after animation has ended.
P.S. I didn't look and copy FITCH.com code, it might be same, i don't know.
Related
I am trying to animate a pie chart transitioning from x% full to y% full. It isn't going well.
The issue is that the animation shows a discrete change: It changes from 66% full to 33% full to 0% full.
A similar animation is continuous: It loads from 1% to 2% to 3% smoothly.
I have a fiddle showing the bug, which is probably me not understanding something about the tool I'm using:
Fiddle <= in the fiddle, the "good" animation is on top of the broken one, so you'll have to delete the parent and child div and reload. But, its there.
My goal is for the pie chart to smoothly animate from x% to y% loaded. It could go from half full to 1/4 full, or 1/9 full to 7/8 full. I just want it to be smooth.
html:
<div
class="pie border border-midnight "
/>
<div class="parent"><div class="filler child" /></div>
css:
.filler {
background-color: blueviolet;
animation-name: tester;
animation-duration: 2s;
transition-timing-function: linear;
}
#keyframes tester {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
.pie {
width: 22px;
height: 22px;
border-radius: 50%;
animation-name: progress-pie;
animation-duration: 2s;
transition-timing-function: ease;
}
#keyframes progress-pie {
0% {
background-image: conic-gradient(#d8d2c3 0deg 150deg, black 150deg 360deg);
}
100% {
background-image: conic-gradient(#d8d2c3 0deg 250deg, black 250deg 360deg);
}
}
I am trying to move a skewed div from top left off screen, through the screen, to bottom right off screen. The effect I am trying to get is that it looks like a parallelogram appears from somewhere up and to the left, and it slowly moves through the screen in a downwards and rightwards motion and then off the screen to the bottom.
Right now I have this index.html:
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="div1" id="one"></div>
</body>
</html>
And here is my index.css:
div {
animation: rotate-all 2s 0 infinite linear alternate;
}
.div1 {
width: 100px;
height: 1000px;
transform: skew(20deg);
background-color: gray;
position: relative;
margin: auto;
animation-name: down;
animation-duration: 4s;
animation-iteration-count: infinite ;
}
#one {
top: 150px;
}
#keyframes down {
0% {
transform: translate(-200px, -1000px);
transform: skew(20deg);
}
100% {
transform: translate(250px, 750px);
}
}
I have two problems:
First, it is changing shape from the skewed shape (looks like a "\") to a unskewed one (looks like a "|"). If I try to add a skew in my 100% keyframe, then it does not move any more, it just stays in the same place. I tried both orders skew then translate / translate then skew.
Second, it does not seem to start above the screen, but right in the middle of the screen.
Appreciate any advice.
You were overwriting the transform property. Transform accepts multiple styles, separated by spaces. If you add the transform property twice, it will overwrite the first one. Just put the translate and skew on the same line both times and it will work.
For the second part, translate it by percents (relative to itself) rather than pixels (absolute measures).
div {
animation: rotate-all 2s 0 infinite linear alternate;
}
.div1 {
width: 100px;
height: 1000px;
transform: skew(20deg);
background-color: gray;
position: relative;
margin: auto;
animation-name: down;
animation-duration: 4s;
animation-iteration-count: infinite ;
}
#one {
top: 150px;
}
#keyframes down {
0% {
transform: translate(-200%, -200%) skew(20deg);
}
100% {
transform: translate(250px, 750px) skew(20deg);
}
}
<div class="div1" id="one"></div>
I have created animation for element in the page to slide in from the left, so it's starting point is
transform: translateX(-200%)
but when the page loads it has a scrollbar.
I'm using Chrome. it happens also in FF.
I'm also getting vertical scrollbar for
transform: translateY(200%)
I tried using
body, html{
overflow: hidden;
}
which seems to make the scrollbars disappear, but then the animation also doesn't work, I'm getting empty window until the animation ends.
The question is how can I use the animation with same parameters but without the scrollbar (horizontal and vertical).
more code:
.text {
transform: translateX(-200%);
-webkit-transform: translateX(-200%);
animation: slide-in-fleft 1s forwards;
-webkit-animation: slide-in-fleft 1s forwards;
animation-delay: 1s;
}
#keyframes slide-in-fleft {
100% { transform: translateX(0%); }
}
Try the following code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 2s;
transform: translateX(200%);
}
/* Chrome, Safari, Opera */
#-webkit-keyframes example {
from {transform: translateX(-200%);}
to {transform: translateX(200%);}
}
/* Standard syntax */
#keyframes example {
from {transform: translateX(-200%);}
to {transform: translateX(200%);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
When an animation is finished, it changes back to its original style
I've been trying to blink two colors, using the following CSS rules but the colors just ends up blending.
Here is the jsfiddle: http://jsfiddle.net/1kyba3rd/
Here are the CSS rules:
<style>
.block {
width: 100px;
height: 100px;
border: 1px solid black;
/* Chrome, Safari, Opera */
-webkit-animation-name: flash-colors;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: steps(2, start);
-webkit-animation-iteration-count: infinite;
/* Standard Syntax */
animation-name: flash-colors;
animation-duration: 1s;
animation-timing-function: steps(2, start);
animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes flash-colors {
0% {
background-color: white;
}
100% {
background-color: yellow;
}
}
/* Standard syntax */
#keyframes flash-colors {
0% {
background-color: white;
}
100% {
background-color: yellow;
}
}
</style>
the blinking is not working properly because you have set background-color:yellow at the end of the animation (100%) and the background-color:white at the beginning, set first one at 50% so that the animation works as expected - demo
I am trying to capture a specific moment in elements animation. Meaning - I want the animation to start and stop at point X (lets say start and stop on second 5 of 100s animation).
Here is my shot at it
JSFiddle
#-webkit-keyframes background {
from { background: yellow; }
100% {
background: blue;
}
}
div {
-webkit-animation-name: background;
-webkit-animation-duration: 100s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: -40s;
-webkit-animation-play-state: paused;
}
This seems to work great in Chrome and Firefox but doesnt seem to work in Safari and IE(no way, right?!)
Note: I left the prefix in on purpose to test it on Safari specifically.
Unlike in Chrome, it seems like the animation never starts in Safari and remains on the initial step.
Is this a known issue? Is there a workaround or another way to implement this?
UPDATE/CLARIFICATION
What i need is to be able to capture a specific FRAME of the animation. Open my fiddle in Chrome and play around animation-delay attribute in my fiddle (make sure it remains negative). What you will see is that you are able to catch 1 specific frame of the animation. Thats exactly what I need. My problem is that this doesnt work in Safari.
What about creating a keyframe animation of 5 seconds and make sure there is ' 100ms in percentage' where the frames are the same.
Since the animation scale for time is in percentages, we can calculate that 100ms/5000ms is equal to 2%/100%.
div {
background:#333;
padding:10px;
width:100px;
height:100px;
color:#fff;
animation-name: animateAndPause;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#keyframes animateAndPause {
0% {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
98% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
100% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
for the purpose of demonstration, the jsfiddle has a longer pause, 500ms.
https://jsfiddle.net/bfu9wvxt/5/
If you want your animation to stop and start at a specific point, you need more keyframes:
#-webkit-keyframes background {
0% { background: yellow; }
/* When You Want */% { background: /* A different color in-between yellow and blue! */; }
/* When You Want */% { background: /* A different color in-between yellow and blue! */; }
100% { background: blue; }
}
div {
-webkit-animation-name: background;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: ease;
}
Replace the first /* When You Want */% with a percentage of the animation duration where you want it to stop.
Replace the second /* When You Want */% with a percentage of the animation duration where you want it to start again.
Replace both occurrences of /* A different color in-between yellow and blue! */ with the same color, a color between yellow and blue.
This should work in Safari: Fiddle
#-webkit-keyframes change {
0% { background-color: yellow; }
100% { background-color: blue; }
}
div {
-webkit-animation-name: change;
-webkit-animation-delay: 0s;
-webkit-animation-duration: 5s;
-webkit-animation-play-state: running;
-webkit-animation-timing-function: cubic-bezier(0.29, 0.3, 0.86, 0.99);
}
Playing with the cubic-bezier curve can replicate the animation of stopping then starting at 5s out of 100s but it'll be pretty hard to start and stop the animation without javascript.
Try this code:
Is compatible with all the browsers especially safari.
div {
width: 100%;
background-color: #fff;
position: relative;
-webkit-animation-name: example;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 5s;
/* Chrome, Safari, Opera */
-webkit-animation-delay: 5s;
/* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 5s;
animation-delay: 5s;
-webkit-animation-iteration-count: 100;
/* Chrome, Safari, Opera */
animation-iteration-count: 100;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes example {
25% {
background-color: blue;
}
50% {
background-color:yellow ;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
}
/* Standard syntax */
#keyframes example {
25% {
background-color: blue;
}
50% {
background-color:yellow ;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
}
<div>Color bar</div>
If you want it not 100 times, You can take it out and add 100s to
duration, because I'm not sure what you want
let me know if you have any question.