I'm fading in two objects on a very simple page. First the logo, then the text. Why is the animation on the text not delaying with this code? The other one works flawlessly, but it doesn't have any delay.
.centralimg {
background-image: url(logo.png);
background-size: 576px 173px;
width: 576px;
height: 173px;
animation: fadein 1200ms;
-moz-animation: fadein 1200ms; /* Firefox */
-webkit-animation: fadein 1200ms; /* Safari and Chrome */
-o-animation: fadein 1200ms; /* Opera */
}
.centraltext {
color: rgb(147, 145, 147);
font-family: 'Nunito', sans-serif;
font-size: 8pt;
margin-top: 25px;
animation: fadein 1200ms;
animation-delay: 3s;
-moz-animation: fadein 1200ms; /* Firefox */
-moz-animation-delay:3s;
-webkit-animation: fadein 1200ms; /* Safari and Chrome */
-webkit-animation-delay:3s;
-o-animation: fadein 3200ms; /* Opera */
}
Your code is correct, but you must add some property to the .centraltext, because it should not be visible until the animation is applied (opacity: 0 in JSFiddle example).
And also add the property animation-fill-mode to preserve the style of the last frame.
Example: JSFiddle
.centraltext {
...
opacity: 0;
animation-fill-mode: forwards;
}
It will delay two seconds, then start the animation. It can be useful.
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;
Related
I am working on project having multiple animation on same element time to time and switching animation-play-state paused to running.
When i'm trying to add a class having animation shorthand syntax including animation-play-state:running then it's not working in IE & Safari.
.fadein-left {
-webkit-animation: fadeInLeft 1s 2s both running;
animation: fadeInLeft 1s 2s both running;
}
jsfiddle link
But if i use animation-play-state in separate line then it's working fine in all browser.
.fadein-left {
-webkit-animation: fadeInLeft 1s 2s both;
animation: fadeInLeft 1s 2s both;
-webkit-animation-play-state: running;
animation-play-state: running;
}
jsfiddle link
I checked animation property on msdn in Remarks section they just mentioned-
However, the animation property does not specify values for the animation-play-state property.
Is it possible to use animation-play-state in shorthand animation or i have to use it in separate line?
try out this:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 5s; /* Chrome, Safari, Opera */
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation: mymove 5s;
animation-play-state: paused;
}
I need a side panel that slides in and slides out if the button is clicked. I am trying to write it in pure css.
How can achieve the transition smooth. I tried keyframes and i am not getting the desired result.
Here is my jsFiddle link
Here is my css i played with
.showFlyoutPanel.ng-enter, .showFlyoutPanel.ng-leave {
}
.showFlyoutPanel.ng-enter,
.showFlyoutPanel.ng-leave.ng-leave-active {
-webkit-animation-name: slideOut; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-name: slideOut;
animation-duration: 4s;
animation-direction: reverse;
}
.showFlyoutPanel.ng-leave,
.showFlyoutPanel.ng-enter.ng-enter-active {
-webkit-animation-name: slideIn; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-direction: forwards; /* Chrome, Safari, Opera */
animation-name: slideIn;
animation-duration: 4s;
animation-direction: forwards;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes slideIn {
0% {right:-100px;}
25% {right:-75px;}
50% {right:-50px;}
75% {right:-25px;}
100% {right:0;opacity: 1;}
}
/* Standard syntax */
#keyframes slideIn {
0% {right:-100px;}
25% {right:-75px;}
50% {right:-50px;}
75% {right:-25px;}
100% {right:0;opacity: 1;}
}
/* Chrome, Safari, Opera */
#-webkit-keyframes slideOut {
0% {right:0px;}
25% {right:25%;}
50% {right:50%;}
75% {right:75%;}
100% {right:100%;}
}
/* Standard syntax */
#keyframes slideOut {
0% {right:0px;}
25% {right:25%;}
50% {right:50%;}
75% {right:75%;}
100% {right:100%;}
}
I got the answer with this set of codes. But want to make sure whether the code set is correct. And what is the use of
.showFlyoutPanel.ng-enter, .showFlyoutPanel.ng-leave { }
.showFlyoutPanel.ng-enter, .showFlyoutPanel.ng-leave {
}
.showFlyoutPanel.ng-enter,
.showFlyoutPanel.ng-leave.ng-leave-active {
-webkit-animation-timing-function: ease-in-out;
-webkit-animation: slideOut 5s; /* Chrome, Safari, Opera */
animation: slideOut 5s ;
}
.showFlyoutPanel.ng-leave,
.showFlyoutPanel.ng-enter.ng-enter-active {
-webkit-animation: slideIn 5s; /* Chrome, Safari, Opera */
animation: slideIn 5s ;
-webkit-animation-timing-function: ease-in-out;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes slideIn {
from {left: 100%;}
to {left: 0px;}
}
/* Standard syntax */
#keyframes slideIn {
from {left: 100%;}
to {left: 0px;}
}
/* Chrome, Safari, Opera */
#-webkit-keyframes slideOut {
from {left: 0px;}
to {left: 100%;}
}
/* Standard syntax */
#keyframes slideOut {
from {left: 0px;}
to {left: 100%;}
}
I have a question that might sound stupid, but here it goes anyways.
For starters, here is the website I'm creating.
www.redshedproductionsllc.com
I have an animation running on an h1 element on my website that fades in after a delay. The problem was is that the text showed before the animation started, so it kind of had a glitchy start. I found a workaround that works flawlessly on chrome, but not on any other browser. The element simply stays hidden. Here is my CSS.
#fading1 {
animation: fadein 4s;
-moz-animation: fadein 4s; /* Firefox */
-webkit-animation: fadein 4s; /* Safari and Chrome */
-o-animation: fadein 4s; /* Opera */
}
#fading2 {
visibility: hidden;
animation: fadein 4s;
-moz-animation: fadein 4s; /* Firefox */
-webkit-animation: fadein 4s; /* Safari and Chrome */
-o-animation: fadein -4s; /* Opera */
-moz-animation-delay: 2s;
-webkit-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
-moz-animation-fill-mode: forwards; /*FF 5+*/
-webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/
-o-animation-fill-mode: forwards; /*Not implemented yet*/
-ms-animation-fill-mode: forwards; /*IE 10+*/
animation-fill-mode: forwards; /*when the spec is finished*/
}
Check it out on chrome, then check it out on firefox or safari. Chrome fades in flawlessly, while the other two stay hidden. Please help!!!
First of all, there is no such thing as moz-prefixed animation-delay. Having -moz-animation-delay: 2s is unneccessary. I'm not sure why it is working in chrome and not Firefox, but I have a feeling that the animation of visibility doesn't work well in all browsers.
It would make more sense to me to fade it in from opacity: 0 to opacity: 1 over three seconds, but make the first two seconds the delay, keeping the opacity at 0.
#keyframes fadein {
0% {opacity: 0;}
66% {opacity: 0;}
100% {opacity: 1;}
}
#-webkit-keyframes fadein {
0% {opacity: 0;}
66% {opacity: 0;}
100% {opacity: 1;}
}
.fade{
opacity: 1;
-moz-animation: fadein 3s;
animation: fadein 3s;
width: 100px;
height: 100px;
background: blue;
}
JSFiddle
I am not very sure but you have to use something like this:
So the thing is, you have to specify certain functions of CSS for each and every browser, so you should do like this:
#-webkit-keyframes fadein {
0% {opacity: 0;}
66% {opacity: 0;}
100% {opacity: 1;}
-moz-boxshadow
Read MDN guides for these prefixes.
Hope it helps! :)
I'm trying to create a beginner's CSS3 animation. It's working in Chrome, Opera and Safari but doesn't in Internet Explorer (11) and Firefox (34.0)
I'm using the -moz- prefix, but it isn't working… I don't know why.
body{
width:100%;
}
#center{
width:900px;
margin:0 auto;
height:800px;
display:block;
}
#center .box{
width:100px;
height:100px;
background-color:black;
margin:0 auto;
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s; /*Explorer*/
-moz-animation: myfirst 5s; /*Mozilla*/
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#-webkit-keyframes myfirst{
from{backgrond:black;}
to{background:yellow;}
}
#-moz-keyframes myfirst{
from{background:black;}
to{background: :yellow;}
}
#keyframes myfirst {
from{background:black;}
to{background: :yellow;}
}
JSFiddle
There are a few small tweaks required for your animation to work:
remove the double ::, as this isn't correct syntax
your non-prefixed animation should be placed below any prefixed animations.
LIVE DEMO
tested in Chrome 39, IE 11 and Firefox 33
You need to correct the typo : inside the keyframes
Check fiddle here
#center .box{
width:100px;
height:100px;
margin:0 auto;
background-color:black;
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite; /*Végtelen újrajátszás */
-moz-animation: myfirst 5s; /*Mozilla*/
-moz-animation-iteration-count: infinite;
animation: myfirst 5s; /*Explorer*/
animation-iteration-count: infinite;
}
#-webkit-keyframes myfirst{
from{background:black;}
to{background:yellow;}
}
#-moz-keyframes myfirst{
from{background:black;}
to{background:yellow;}
}
#keyframes myfirst {
from{background:black;}
to{background:yellow;}
}
Below i have corrected the keyframes don't use unwanted semi-colon
#-moz-keyframes myfirst{ /* firefox */
from{background:black;}
to{background: :yellow;}
}
#-ms-keyframes myfirst{ /* explorer */
from{background:black;}
to{background: yellow;}
}
and also and the box class
-ms-animation: myfirst 5s; /*Explorer*/
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?