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
Related
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.
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.
I have a problem with CSS animation. Animation works great in IE10 (and Chrome, Mozilla, Safari), but doesn't work in IE9 (and also IE edge).
This is my CSS:
.tossing07{
-webkit-animation-name: tossing07;
animation-name: tossing07;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#-webkit-keyframes tossing07 {
0% {
-webkit-transform: rotate(-25deg);
}
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-25deg);
}
}
#keyframes tossing07 {
0% {
transform: rotate(-25deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-25deg);
}
}
It's normal, animation work since Ie10 look at can i use page, sorry
CSS animation is not supported for IE9 or earlier. Thats why your css animation is not working. Even vendor prefixing would not work.
I happened to post a question on linear animation that outlook.com presents and some of our friends here told me that its not possible. I was able to achieve that with CSS3 keyframes. However, it seems to work only in IE10 and not in Firefox and Chrome. I have put alternate tags for firefox and chrome from w3schools still I am not sure why its not working. Here is the link from jsfiddle which contains my code. I am also putting github link just in case. Please help me in this regard.
JSFiddle
Github
Part of my code is as follows. This code is repeated for each .(dot) with slight change in timings. There are 5 dots like this.
.linearAnimate1
{
animation-delay: 0s;
-moz-animation-delay:0s; /* Firefox */
-webkit-animation-delay:0s; /* Safari and Chrome */
animation-duration: 10s;
-moz-animation-duration:10s; /* Firefox */
-webkit-animation-duration:10s; /* Safari and Chrome */
animation-iteration-count: infinite;
-moz-animation-iteration-count:infinite; /* Firefox */
-webkit-animation-iteration-count:infinite; /*Safari and Chrome*/
animation-name: makedotspin1;
-moz-animation-name: makedotspin1;
-webkit-animation-name: makedotspin1;
}
#keyframes makedotspin1 {
from {
animation-timing-function: ease;
-moz-animation-timing-function:ease; /* Firefox */
-webkit-animation-timing-function:ease; /* Safari and Chrome */
transform: translateX(0px);
-moz-transform: translateX(0px);
-webkit-transform: translateX(0px);
visibility:visible;
}
25% {
animation-timing-function: ease-in;
-moz-animation-timing-function:ease-in; /* Firefox */
-webkit-animation-timing-function:ease-in; /* Safari and Chrome */
transform: translateX(450px);
-moz-transform: translateX(450px);
-webkit-transform: translateX(450px);
animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
50% {
animation-timing-function: ease-inout;
transform: translateX(900px);
-moz-transform: translateX(900px);
-webkit-transform: translateX(900px);
visibility:hidden;
animation-delay: 10s;
-moz-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
to
{
}
}
Animated buttons metro style progress bar (to show it can't only be done using a gif
I believe you need to have a prefix for #keyframes for the different layout engines, in example:
#-webkit-keyframes {}
#-moz-keyframes
etc, IE10 works because it supports the official spec
Finally I have found out the issue. Since I have used an unordered list I have used the following CSS
ul li
{
display: inline;
font-size:4em;
visibility:hidden;
}
However, Mozilla and chrome are unable to do animation because the display is inline and all the list items are on top of each other. To fix the issue I had to do two things 1) I had to add -moz- and -webkit- prefixes for keyframes 2) Change the display to be inline-block as follows and it fixed the issue. Now the animation works on Mozilla, IE and Chrome
ul li
{
display: inline-block;
font-size:4em;
visibility:hidden;
}
I'm working on a CSS3 Keyframe Animation with a skew() transform. I was able to achieve the result I was looking for in Safari 6. However, when I view the page on another Webkit browser, Chrome I am getting a different animation result.
Here is my code:
HTML
<div id="test">
webkit animation test
</div>
CSS
#test {
position: absolute;
left: 200px;
top: 0px;
width: 200px;
height: 200px;
background-color: rgba(0,0,0,0.5);
-webkit-animation-name: testBox;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate; /* alternate, normal */
-webkit-animation-play-state: running;
}
#-webkit-keyframes testBox /* Safari and Chrome */ {
0% {
-webkit-transform: skew(70deg,0deg);
}
100% {
-webkit-transform: skew(-70deg,0deg);
}
}
Anyone else have this issue?