Curious to find out I am able to implement the following webkit-animation into non-webkit browser, such as Firefox, Internet Explorer and Opera? What would the coding be?
#-webkit-keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
.object {
-webkit-animation-name: FadeIn;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 3s;
}
#-webkit-keyframes FadeIn
{
0%
{
opacity:0;
}
100%
{
opacity:1;
}
}
#-webkit-keyframes FadeOut
{
0%
{
opacity:1;
}
100%
{
opacity:0;
}
}
#-moz-keyframes FadeIn
{
from { opacity:0; } to { opacity:1; }
}
#-moz-keyframes FadeOut
{
from { opacity:1; } to { opacity:0; }
}
#-o-keyframes FadeIn
{
from { opacity:0; } to { opacity:1; }
}
#-o-keyframes FadeOut
{
from { opacity:1; } to { opacity:0; }
}
#keyframes FadeIn
{
from { opacity:0; } to { opacity:1; }
}
#keyframes FadeOut
{
from { opacity:1; } to { opacity:0; }
}
#example
{
-webkit-animation:FadeIn ease-in 0.5s;
-moz-animation:FadeIn ease-in 0.5s;
-o-animation:FadeIn ease-in 0.5s;
animation:FadeIn ease-in 0.5s;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
IE does not support the CSS3 Transitions. More advices from here
Guess you can use
-moz-animation:
for mozilla and
-o-animation:
for opera.
Internet explorer does not support the same
You could check this link for more info http://www.w3schools.com/css3/css3_animations.asp
Related
I made an animation using -webkit- prefix and it worked fine. This is the code:
.popuptext.show {
opacity: 0;
visibility: visible;
-webkit-animation: fadeinout 5s;
animation: fadeinout 5s;
}
#-webkit-keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes fadeinout {
50% { opacity: 1; }
}
Now I want to add other prefixes to make the animation compatible with other browsers, but I'm not sure how to do it. This is my idea:
.popuptext.show {
opacity: 0;
visibility: visible;
-webkit-animation: fadeinout 5s;
-moz-animation: fadeinout 5s;
-o-animation: fadeinout 5s;
animation: fadeinout 5s;
}
#-webkit-keyframes fadeinout {
50% { opacity: 1; }
}
#-moz-keyframes fadeinout {
50% { opacity: 1; }
}
#-o-keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes fadeinout {
50% { opacity: 1; }
}
As you can see I added the prefixes for Mozilla and Opera.
You may not need to use different browser prefixes. First thing to do is check caniuse.com and see how well supported the css is.
If it's not supported just append the prefix as described here
I have a widget and I am trying to put all my code inside the widget selector so it doesn't break exterior css(of the website where widget is placed). For this I also want to put my animation under the widget selector.
Placing a selector infront of the #keyframes breaks the code and animation doesn't work
This works:
animation: slide-up-fade-in ease 1s;
#keyframes slide-up-fade-in{
0% {
...
}
}
But if I place a selector in front of the #keyframes it stops working
animation: slide-up-fade-in ease 1s;
mybot #keyframes slide-up-fade-in{
0% {...}
Maybe it will help:
#box {
-webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}
#-webkit-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
With this CSS everything should work correctly. :)
#keyframes heartBeat {
from {
transform: scale(0.7);
}
0% {
transform: scale(0.55);
}
25% {
transform: scale(0.7);
}
50% {
transform: scale(0.6);
}
60% {
transform: scale(0.7);
}
100% {
transform: scale(0.55);
}
to {
transform: scale(0.7);
}
}
.animation-heartBeat {
animation: .7s infinite heartBeat;
}
it works fine on desktop but on mobile im getting the static state instead of the fading in and out.
I put the code here...
https://codepen.io/anon/pen/jvKZGW
#keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.loading {
-webkit-animation: flickerAnimation 1s infinite;
-moz-animation: flickerAnimation 1s infinite;
-o-animation: flickerAnimation 1s infinite;
animation: flickerAnimation 1s infinite;
background: #215c87;
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
top: 10px;
right: 10px;
}
I can make an element with an opacity of zero fade in by changing its class to .elementToFadeInAndOut with the following css:
.elementToFadeInAndOut {
opacity: 1;
transition: opacity 2s linear;
}
Is there a way I can make the element fade out after it fades in by editing css for this same class?
Use css #keyframes
.elementToFadeInAndOut {
opacity: 1;
animation: fade 2s linear;
}
#keyframes fade {
0%,100% { opacity: 0 }
50% { opacity: 1 }
}
here is a DEMO
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}
#-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
#keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
<div class=elementToFadeInAndOut></div>
Reading: Using CSS animations
You can clean the code by doing this:
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
opacity: 0;
}
#-webkit-keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes fadeinout {
50% { opacity: 1; }
}
<div class=elementToFadeInAndOut></div>
If you need a single fadeIn/Out without an explicit user action (like a mouseover/mouseout) you may use a CSS3 animation: http://codepen.io/anon/pen/bdEpwW
.elementToFadeInAndOut {
animation: fadeInOut 4s linear 1 forwards;
}
#keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
By setting animation-fill-mode: forwards the animation will retain its last keyframe
By setting animation-iteration-count: 1 the animation will run just once (change this value if you need to repeat the effect more than once)
I found this link to be useful: css-tricks fade-in fade-out css.
Here's a summary of the csstricks post:
CSS classes:
.m-fadeOut {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms;
}
In React:
toggle(){
if(true condition){
this.setState({toggleClass: "m-fadeIn"});
}else{
this.setState({toggleClass: "m-fadeOut"});
}
}
render(){
return (<div className={this.state.toggleClass}>Element to be toggled</div>)
}
Try creating a keyframes animation for the opacity attribute of your element:
<style>
p {
animation-name: example;
animation-duration: 2s;
}
#keyframes example {
from {opacity: 2;}
to {opacity: 0;}
}
</style>
<div>
<p>[Element to fade]</p>
</div>
(You can also set the exact percentages of animations to make it fade in/out. For example, set 0% to 2 opacity, 50% to 0 opacity, and 100% to 2 opacity. A good source for this method is W3Schools # https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation2 .)
Try this:
#keyframes animationName {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#-o-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#-moz-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#-webkit-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
.elementToFadeInAndOut {
-webkit-animation: animationName 5s infinite;
-moz-animation: animationName 5s infinite;
-o-animation: animationName 5s infinite;
animation: animationName 5s infinite;
}
I can preview in firefox only.
Please help me.
Link to Fiddle
HTML
<div id="yamaha">
<div class="bg1"></div>
<div class="pic1"></div>
</div>
CSS
body { margin:auto; }
/*yamaha */
#yamaha { width:990px; height:450px; position:relative; opacity:0; -moz-animation: yamaha 40s linear; }
#yamaha div { position:absolute; background: 0 0 no-repeat; }
#yamaha .bg1 { width:990px; height:450px; background:url("../images/bg1.jpg");-webkit-animation: bg1 2s linear;-moz-animation: bg1 2s linear;}
#yamaha .pic1 {
width:990px;
height:142px;
background:url("../images/pic1.png");
z-index:2;
top:308px;
opacity:0;
-moz-animation: pic1 100s linear 2s;
}
/* Safari and Chrome */
#-webkit-keyframes yamaha {
0% { opacity:0; }
1% { opacity:1; }
50% { opacity:1; }
51% { opacity:0; }
100%; { opacity:0; }
}
#-webkit-keyframes bg1 {
0% { opacity:0; }
100%; { opacity:1; }
}
#-webkit-keyframes pic1 {
0% { -webkit-transform:scale(0); opacity:0; }
1% { -webkit-transform:scale(1); opacity:1; }
100%; { -webkit-transform:scale(1); opacity:1; }
}
/* Firefox */
#-moz-keyframes yamaha {
0% { opacity:0; }
1% { opacity:1; }
50% { opacity:1; }
51% { opacity:0; }
100%; { opacity:0; }
}
#-moz-keyframes bg1 {
0% { opacity:0; }
100%; { opacity:1; }
}
#-moz-keyframes pic1 {
0% { -moz-transform:scale(0); opacity:0; }
1% { -moz-transform:scale(1); opacity:1; }
100%; { -moz-transform:scale(1); opacity:1; }
}
Thank a lot.
#yamaha {
width:990px;
height:450px;
position:relative;
opacity:0;
-moz-animation: yamaha 40s linear;
-webkit-animation: yamaha 40s linear; /* Add this */
animation: yamaha 40s linear; /* Add this */
}
#yamaha .bg1 {
width:990px;
height:450px;
background:url("../images/bg1.jpg");
-webkit-animation: bg1 2s linear;
-moz-animation: bg1 2s linear;
animation: bg1 2s linear; /* Add this */
}
/* and add this */
#keyframes yamaha {
0% { opacity:0; }
1% { opacity:1; }
50% { opacity:1; }
51% { opacity:0; }
100%; { opacity:0; }
}
#keyframes bg1 {
0% { opacity:0; }
100%; { opacity:1; }
}
#keyframes pic1 {
0% { -webkit-transform:scale(0); opacity:0; }
1% { -webkit-transform:scale(1); opacity:1; }
100%; { -webkit-transform:scale(1); opacity:1; }
}
I hope this helps