I have a fade in animation with an opacity, its working great except the fact is the element is showing when the page is loading, then does the animation...
Here is my CSS code:
.header-wrap {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-duration:1s;
animation-delay: 1s;
}
And here are the keyframes:
#-webkit-keyframes fadeInLeft {
from {
opacity:0;
-webkit-transform: translatex(-10px);
-moz-transform: translatex(-10px);
-o-transform: translatex(-10px);
transform: translatex(-10px);
}
to {
opacity:1;
-webkit-transform: translatex(0);
-moz-transform: translatex(0);
-o-transform: translatex(0);
transform: translatex(0);
}
}
#-moz-keyframes fadeInLeft {
from {
opacity:0;
-webkit-transform: translatex(-10px);
-moz-transform: translatex(-10px);
-o-transform: translatex(-10px);
transform: translatex(-10px);
}
to {
opacity:1;
-webkit-transform: translatex(0);
-moz-transform: translatex(0);
-o-transform: translatex(0);
transform: translatex(0);
}
}
#keyframes fadeInLeft {
from {
opacity:0;
-webkit-transform: translatex(-100px);
-moz-transform: translatex(-100px);
-o-transform: translatex(-100px);
transform: translatex(-100px);
}
to {
opacity:1;
-webkit-transform: translatex(0);
-moz-transform: translatex(0);
-o-transform: translatex(0);
transform: translatex(0);
}
}
Please help, what am I doing wrong?
I have also tried setting the opacity to 0 in my element, but all that does is not show the element after the animation.
.header-wrap {
opacity: 0;
}
the solution i came to
the header-wrap
.header-wrap {
opacity: 0;
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-duration:1s;
animation-delay: 1s;
-webkit-transform: translatex(-100px);
-moz-transform: translatex(-100px);
-o-transform: translatex(-100px);
transform: translatex(-100px);
}
the key frames
#-webkit-keyframes fadeInLeft {
from {
opacity:0;
}
to {
opacity:1;
-webkit-transform: translatex(0px);
-moz-transform: translatex(0px);
-o-transform: translatex(0px);
transform: translatex(0px);
}
}
#-moz-keyframes fadeInLeft {
from {
opacity:0;
}
to {
opacity:1;
-webkit-transform: translatex(0px);
-moz-transform: translatex(0px);
-o-transform: translatex(0px);
transform: translatex(0px);
}
}
#keyframes fadeInLeft {
from {
opacity:0;
}
to {
opacity:1;
-webkit-transform: translatex(0px);
-moz-transform: translatex(0px);
-o-transform: translatex(0px);
transform: translatex(0px);
}
}
by translating prior to your keyframes methods and setting opactity to 0 in the header-wrap and using fill mode forward it should work, its working for me on chrome
add opacity:0 to your header so it won't show up on load! then add animation-fill-mode:forwards to apply the lasts properties in your animation to your header
#-webkit-keyframes fadeInLeft {
from {
opacity:0;
-webkit-transform: translatex(-10px);
-moz-transform: translatex(-10px);
-o-transform: translatex(-10px);
transform: translatex(-10px);
}
to {
opacity:1;
-webkit-transform: translatex(0);
-moz-transform: translatex(0);
-o-transform: translatex(0);
transform: translatex(0);
}
}
#-moz-keyframes fadeInLeft {
from {
opacity:0;
-webkit-transform: translatex(-10px);
-moz-transform: translatex(-10px);
-o-transform: translatex(-10px);
transform: translatex(-10px);
}
to {
opacity:1;
-webkit-transform: translatex(0);
-moz-transform: translatex(0);
-o-transform: translatex(0);
transform: translatex(0);
}
}
#keyframes fadeInLeft {
from {
opacity:0;
-webkit-transform: translatex(-100px);
-moz-transform: translatex(-100px);
-o-transform: translatex(-100px);
transform: translatex(-100px);
}
to {
opacity:1;
-webkit-transform: translatex(0);
-moz-transform: translatex(0);
-o-transform: translatex(0);
transform: translatex(0);
}
}
.header-wrap {
opacity:0;
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-duration:1s;
animation-delay: 1s;
animation-fill-mode:forwards;
}
<h1 class="header-wrap">header</h1>
You should set animation-fill-mode of header-wrap to forward so the opacity stays on 1 after the animation
.header-wrap should look like this
.header-wrap {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-duration:1s;
animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
opacity: 0;
}
Related
How to add animations that start when pages are loaded. puts the scroll in the middle of the page
My code css:
#-webkit-keyframes fadeDown {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
-ms-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(500px);
transform: translateY(500px);
-ms-transform: translateY(500px);
}
}
#keyframes fadeDown {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
-ms-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(500px);
transform: translateY(500px);
-ms-transform: translateY(500px);
}
}
.fadeDown {
-webkit-animation-name: fadeDown;
animation-name: fadeDown;
}
.main {
-webkit-animation-name: fadeDown;
-webkit-animation-duration: 2s;
animation-name: fadeDown;
animation-duration: 2s;
}
<div class="main">
<app-a>App a</app-a>
<div class="container">
<app-b-menu>App b</app-b>
</div>
</div>
I would ask for help. I want to make animations. Sets the scroll in the middle of the page
try this code
html
<div class="main">
<app-a>App a</app-a>
<div class="container">
<app-b-menu>App b</app-b>
</div>
</div>
css
#-webkit-keyframes fadeDown {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
-ms-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(50vh);
transform: translateY(50vh);
-ms-transform: translateY(50vh);
}
}
#keyframes fadeDown {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
-ms-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(50vh);
transform: translateY(50vh);
-ms-transform: translateY(50vh);
}
}
.fadeDown {
-webkit-animation-name: fadeDown;
animation-name: fadeDown;
}
.main {
-webkit-animation-name: fadeDown;
-webkit-animation-duration: 2s;
animation-name: fadeDown;
animation-duration: 2s;
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
This rotate animation does not work in mozila firefox but in google chrome, it is working properly. Actually this problem only occurs in absolute and relative blocks.In general cases this animation work properly in any browser. Please help..
My css codes are given below.
css code :
.gear1{
display:block;
width:64px;
height:64px;
position:absolute;
left:0;
bottom:0;
-webkit-animation-name: rotate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 3s;
-moz-animation-name: rotate;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration: 3s;
-o-animation-name: rotate;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
-o-animation-duration: 3s;
-ms-animation-name: rotate;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-ms-animation-duration: 3s;
animation-name:rotate;
animation-iteration-count:infinite;
animation-timing-function:linear;
animation-duration:3s;}
Css Animation :
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
#-moz-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
#-o-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
#-ms-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
This is because you are using the wrong vendor prefixes in your keyframe declaration. You need to use the same vendor (for transform) prefix of your #key-{vendor}-keyframes.
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Is it possible to reduce the code to generate a set of mixins that can handle the various browser prefixes?
Trying to reduce the code length to use more mixins
So instead of
#-moz-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}
}
#-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}
}
#-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}
}
#-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}
}
we have something more like this?
#keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
transform: rotate(180deg);
animation-timing-function: ease-out;
}
}
in SASS you could use this template:
#mixin keyframes($animation-name) {
#-webkit-keyframes $animation-name {
#content;
}
#-moz-keyframes $animation-name {
#content;
}
#keyframes $animation-name {
#content;
}
}
it should get you started!
i'm not to sure if its the bootstrap framework or that i'm missing something but this animation is meant to rotate various states of the letter Y.
h2 .rotateY, li .rotateY{
animation-iteration-count: 1;
animation-fill-mode:forwards; /*when the spec is finished*/
animation: animationFrames ease-in-out 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation: animationFrames ease-in-out 2s;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-moz-animation: animationFrames ease-in-out 2s;
-o-animation-iteration-count: 1;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-o-animation: animationFrames ease-in-out 2s;
-ms-animation-iteration-count: 1;
-ms-animation-fill-mode:forwards; /*IE 10+*/
-ms-animation: animationFrames ease-in-out 2s;
}
#keyframes animationFrames{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg) ;
}
}
#-moz-keyframes animationFrames{
0% {
-moz-transform: rotate(180deg);
}
100% {
-moz-transform: rotate(180deg) ;
}
}
#-webkit-keyframes animationFrames {
0% {
-webkit-transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(180deg) ;
}
}
#-o-keyframes animationFrames {
0% {
-o-transform: rotate(180deg) ;
}
100% {
-o-transform: rotate(180deg) ;
}
}
#-ms-keyframes animationFrames {
0% {
-ms-transform: rotate(180deg) ;
}
100% {
-ms-transform: rotate(180deg) ;
}
}
the end result should be an upside-down Y after going through 180 degrees rotation.
i'm getting the animation working but after its ran, the Y snaps back to the correct orientation.
The reason for this upside-down Y is a design with typography. using this as an image is not practical.
incidentally, the respective html code for this issue, within a few divs, is:
<h2>H<span class="rotateY">Y</span>BRID</h2>
Is it possible to create continious flip animation (I want icon flipping all the time) with pure CSS just like it's done for continious rotate animation?
#-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
Below is the script for flip animation using keyframes
#keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.flip-animation {
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
backface-visibility: visible;
animation-name: flip;
animation-iteration-count: infinite;
transition-timing-function: linear;
animation-duration: 4.5s;
}
Here is the working Demo. http://jsfiddle.net/kheema/RCFM7/3/
There you go FIDDLE
Now you can play around with rotations on different axis.
for example,-webkit-transform:rotateX(360deg) rotateY(360deg); will rotate it on both x and y axis.
.center {
width:300px;
margin:auto;
margin-top:100px;
-webkit-perspective:250px;
perspective:250px;
}
.animation-rotate {
margin:auto;
-webkit-animation:coinflip 2s infinite linear;
animation:coinflip 2s infinite linear;
}
#-webkit-keyframes coinflip {
0% {
-webkit-transform:rotateY(-1deg);
}
100% {
-webkit-transform:rotateY(360deg);
}
}
#keyframes coinflip {
0% {
transform:rotateY(0deg);
}
100% {
transform:rotateY(360deg);
}
}