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;
}
Related
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;
}
The CSS seems to be horizontally centering the text by the first letter. I'd like to make it be perfectly centered on the page, without breaking the animation. I added a gradient to show the exact horizontal center of the page.
.wrapper {
height: 100vh;
background: linear-gradient(to right, #1e5799 0%,#ffffff 50%,#7db9e8 100%);
}
.container {
text-align: center;
}
.vcenter {
position: relative;
top: calc(50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.container h2 {
background: red;
display: inline-block;
position: absolute;
opacity: 0;
overflow: visible;
-webkit-animation: rotateWord 12s linear infinite 0s;
-ms-animation: rotateWord 12s linear infinite 0s;
animation: rotateWord 12s linear infinite 0s;
margin: 0;
}
.container h2:nth-child(2) {
-webkit-animation: rotateWord 12s linear infinite 3s;
-ms-animation: rotateWord 12s linear infinite 3s;
animation: rotateWord 12s linear infinite 3s;
}
.container h2:nth-child(3) {
-webkit-animation: rotateWord 12s linear infinite 6s;
-ms-animation: rotateWord 12s linear infinite 6s;
animation: rotateWord 12s linear infinite 6s;
}
.container h2:nth-child(4) {
-webkit-animation: rotateWord 12s linear infinite 9s;
-ms-animation: rotateWord 12s linear infinite 9s;
animation: rotateWord 12s linear infinite 9s;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="wrapper">
<div class="container vcenter">
<h2>HEY THERE THIS IS TEXT</h2>
<h2>DIFFERENT TEXT</h2>
<h2>THIS IS TEXT</h2>
<h2>DIFFERENT LENGTHS OF TEXT</h2>
</div>
</div>
Make sure to set the correct transform values in the #keyframes, also the middle div container can be removed to make it easier.
jsFiddle
body {
margin: 0;
}
.container {
height: 100vh;
text-align: center;
background: linear-gradient(to right, #1e5799 0%, #ffffff 50%, #7db9e8 100%);
}
.container h2 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
margin: 0;
}
.container h2:nth-child(1) {
animation: rotateWord 12s linear infinite 0s;
}
.container h2:nth-child(2) {
animation: rotateWord 12s linear infinite 3s;
}
.container h2:nth-child(3) {
animation: rotateWord 12s linear infinite 6s;
}
.container h2:nth-child(4) {
animation: rotateWord 12s linear infinite 9s;
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
transform: translate(-50%, -30px);
}
5% {
opacity: 1;
transform: translate(-50%, 0px);
}
17% {
opacity: 1;
transform: translate(-50%, 0px);
}
20% {
opacity: 0;
transform: translate(-50%, 30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="container">
<h2>HEY THERE THIS IS TEXT</h2>
<h2>DIFFERENT TEXT</h2>
<h2>THIS IS TEXT</h2>
<h2>DIFFERENT LENGTHS OF TEXT</h2>
</div>
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;
}
CSS help
Can somone please tell me why this the background animation is only working for chrome?
Its not work on firefox or IE.
#animate-area {
width: 100%;
background-position: 0px 0px;
background-repeat: repeat;
-webkit-animation: animatedBackground 10s linear infinite;
-moz-animation: animatedBackground 10s linear infinite;
animation: animatedBackground 10s linear infinite;
}
#-webkit-keyframes animatedBackground {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
#-moz-keyframes animatedBackground {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
#keyframes animatedBackground_m {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
You have added below code in you css .. check the animation name here extra _m is added. this is the reason your animation is not working on IE and Firefox.
#keyframes animatedBackground_m {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
Check the working DEMO here.
#animate-area {
width: 100px;
height:100px;
background:url("http://lorempixel.com/100/100/");
-webkit-animation: animatedBackground 10s linear infinite;
-moz-animation: animatedBackground 10s linear infinite;
animation: animatedBackground 10s linear infinite;
}
#-webkit-keyframes animatedBackground {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
#-moz-keyframes animatedBackground {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
#keyframes animatedBackground {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
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