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);
}
}
Related
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;
}
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 have a WordPress site: http://powersmart.tech/wordpress/
I want my webiste logo to rotate like this: https://www.dropbox.com/s/b2h29c8zdpfmuvi/video-1477647190.mp4?dl=0
I have made my logo to rotate in a circle using following code:
#Top_bar #logo img {
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg);
transform:rotate(360deg); } }
Please guide me.
Thanks
You're using the wrong transformation type, this is achieved using scaleX rather then rotate. I've made a small demo how this should work:
#logo {
margin: 50px;
width: 50px;
height: 50px;
background-color: red;
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
#-moz-keyframes spin {
50% {
-moz-transform: scaleX(0.1);
}
}
#-webkit-keyframes spin {
50% {
-webkit-transform: scaleX(0.1);
}
}
#keyframes spin {
50% {
-webkit-transform: scaleX(0.1));
transform: scaleX(0.1);
}
}
<div id="logo"> hi </div>
i am trying to create a very simple animation sequence base on this little article (http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps) but nothing seems to animate.
my css code is the following
.mainContent {
width:960px;
height:388px;
background:url('http://www.wearewebstars.dk/codepen/img/s1.png') repeat-x 0 0;
background-color:#58e9a3;
-webkit-animation: play 1s linear infinite;
-moz-animation: play 1s linear infinite;
-ms-animation: play 1s linear infinite;
animation: play 1s linear infinite;
}
#keyframes play {
0% {
background-position: 0px 0px;
}
50% {
background-position: 0px -190px;
}
100% {
background-position: 0px -300px;
}
}
An example of my code (css+html) can be found here
http://jsfiddle.net/atragan/pqg2yrpL/
Just also adding prefix to your keyframes like this:
#-webkit-keyframes play {
0% {
background-position: 0px 0px;
}
50% {
background-position: 0px -190px;
}
100% {
background-position: 0px -300px;
}
}
#-moz-keyframes play {
...
}
#-o-keyframes play {
...
}
#keyframes play {
...
}
DEMO : http://jsfiddle.net/pqg2yrpL/1/
i have a question about css steps animation, so i have 12 images, and i want to slide this images like animated gif. But i couldn't achieve that.
My Demo : http://cssdeck.com/labs/full/9hwv565g
what i want to : http://cssdeck.com/labs/css-image-sprite-animations-with-steps-function
body {
text-align: center;
}
#-webkit-keyframes wink {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-moz-keyframes wink {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes wink {
from { background-position: 0px; }
to { background-position: -500px; }
}
.hi {
width: 120px;
height: 120px;
background-image: url("http://i44.tinypic.com/nq7mrp.png");
margin: 0 auto;
-webkit-animation: wink .8s steps(10, end) infinite;
-moz-animation: wink .8s steps(10, end) infinite;
animation: wink .8s steps(10, end) infinite;
}
Can you help me?
Thanks in advance
You need to adjust the background-position value and the steps argument, in you case your image measures 1595px in width and has 12 frames:
body {
text-align: center;
}
#-webkit-keyframes wink {
from { background-position: 0px; }
to { background-position: -1595px; }
}
#-moz-keyframes wink {
from { background-position: 0px; }
to { background-position: -1595px; }
}
#keyframes wink {
from { background-position: 0px; }
to { background-position: -1595px; }
}
.hi {
width: 133px;
height: 126px;
background-image: url("http://i44.tinypic.com/nq7mrp.png");
margin: 0 auto;
-webkit-animation: wink .8s steps(12, end) infinite;
-moz-animation: wink .8s steps(12, end) infinite;
animation: wink .8s steps(12, end) infinite;
}
Demo here