The following is an earth globe that's rotating. Though this animation is working fine on Chrome, it doesn't work at all on Firefox, and it just stands still. Any help on how to solve this?
JSFiddle.
<div id="page-wrapper">
<div class="row">
<div class="center-block img-responsive" id="earth"></div>
</div>
</div>
#earth {
width: 100px;
height: 100px;
background: url('../images/Earth-Color.jpg');
border-radius: 50%;
background-size: 210px;
box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0),
inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
margin-top:200px;
}
#keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
}
You need to set the background-position property as a whole in #keyframes
#keyframes rotate {
from { background-position: 0px 0; }
to { background-position: 210px 0; }
}
jsFiddle
background-position-x and background-position-y are not yet implemented in FireFox. But it seems like they will be added in future.
Another SO question on this
Related
The code below works in Firefox.
But in Chrome, text-shadow doesn't get rendered. Ar least for me.
#site-title{
background-color: darkslateblue;
font-size: 35px;
display: block;
animation-name: titleAnimation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes titleAnimation {
from {
border-radius: 30px;
box-shadow: 0px 0px 0px dodgerblue;
text-shadow: 0px 0px 0px yellow;
}
to {
border-radius: 30px;
box-shadow: 0px 0px 40px dodgerblue;
text-shadow: 0px 0px 30px yellow;
}
}
<center><h1 id="site-title">THIS IS A TEST</h1></center>
The code works here on StackOvervlow using Chrome, but not on my blog
Any help is appreciated- Thank you.
it doesn't work on your blog because you are applying the animation on the parent element of the anchor tag instead of the tag itself.
use the following code:
#site-title a{
background-color: darkslateblue;
font-size: 35px;
display: block;
animation-name: titleAnimation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Then clean up your code you have repatitions of #site-title on line 420 and 68.
I tried to make a smooth animation, but the animate has a sort of "cut bug" in the middle.
How can I fix it ?
div,
div:after {
width: 0vw;
height: 3px;
position: fixed;
top: 1vw; bottom: 0;
left: 40vw; right: 40vw;
margin: auto;
/* margin-top: -16px;*/
z-index: 600;
background-color: rgba(0, 0, 0, 1);
}
div {
/*background-color: transparent;*/
/* border-top: 3px solid rgba(0, 0, 0, 0.1);
border-right: 3px solid rgba(0, 0, 0, 0.1);
border-bottom: 3px solid rgba(0, 0, 0, 0.1);
border-left: 3px solid black;
-webkit-transform: translateZ(0);
transform: translateZ(0);*/
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: animsition-loading;
animation-name: animsition-loading;
}
#-webkit-keyframes animsition-loading {
0% {
/*width: 0vw;*/
transform:translate(0vw);
width :0vw;
margin-left: 0;
}
50% {
/*width: 0vw;*/
/*transform:translate(5vw);*/
width :10vw;
}
100% {
/*width: 0vw;*/
transform:translate(1vw);
width :0vw;
margin-right: 0;
}
}
<div> </div>
Here is another way to achieve the same with less of code:
.loading {
height: 3px;
position: fixed;
top: 2vw;
left: 40vw;
right: 40vw;
height: 3px;
background: linear-gradient(#000, #000) left/0% 100% no-repeat;
animation: anime 2s ease-in-out infinite alternate;
}
#keyframes anime {
0% {
background-size: 0% 100%;
background-position: left;
}
50% {
background-size: 70% 100%;
}
100% {
background-size: 0% 100%;
background-position: right;
}
}
<div class="loading"></div>
Try setting your animation this way:
#-webkit-keyframes animsition-loading {
0% {
width :0;
left: 0;
}
50% {
width :10vw;
}
100% {
width :0;
right: 0;
}
Is that the effect you are looking for?
Try this and you're done...
Don't use transform translate, use only width instead.
div,
div:after {
width: 0vw;
height: 3px;
position: fixed;
top: 1vw; bottom: 0;
left: 40vw; right: 40vw;
margin: auto;
/* margin-top: -16px;*/
z-index: 600;
background-color: rgba(0, 0, 0, 1);
}
div {
/*background-color: transparent;*/
/* border-top: 3px solid rgba(0, 0, 0, 0.1);
border-right: 3px solid rgba(0, 0, 0, 0.1);
border-bottom: 3px solid rgba(0, 0, 0, 0.1);
border-left: 3px solid black;
-webkit-transform: translateZ(0);
transform: translateZ(0);*/
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: animsition-loading;
animation-name: animsition-loading;
}
#-webkit-keyframes animsition-loading {
0% {
width :0;
left: 0;
}
50% {
width :10vw;
}
100% {
width :0;
right: 0;
}
}
<div> </div>
I'm trying to make simple animation of a circle which border goes from red to transparent color. How I'm trying to do it is to set initial color as red and then animate it to transparent with keyframes like so:
.pulse{
margin: 20px;
width:100px;
height: 100px;
background-color: red;
border-radius: 100px;
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease;
}
#keyframes pulse{
0%{border:solid 1px rgba(255, 0, 0, 1)}
100%{border:solid 1px rgba(255, 0, 0, 0)}
}
<div class="animation">
<div class="pulse"></div>
</div>
Seemingly nothing happens but after fiddling with it a bit I'm aware that the animation actually works, but the transparent animation is shown on top of existing red border and effect is that it looks like nothing is happening.
What i'm trying to achive is to have the border go from red to transparent, making it look like it's pulsating but without the circle changing it's size.
Try box-shadow instead of border
Stack Snippet
.pulse {
margin: 20px;
width: 100px;
height: 100px;
background-color: red;
border-radius: 100px;
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
#keyframes pulse {
0% {
box-shadow: 0 0 0 4px rgba(255, 0, 0, 1);
}
100% {
box-shadow: 0 0 0 0px rgba(255, 0, 0, 1);
}
}
<div class="animation">
<div class="pulse"></div>
</div>
You won't see anything because you background-color is the same color as the border color. Also your border definition inside your animation was wrong, the width must come before the border style:
So for example it's 1px solid color instead of solid 1px rgba(255,0,0,1).
.pulse {
animation: pulse 1s ease infinite alternate;
background-color: #ddd;
border-radius: 100px;
height: 100px;
margin: 20px;
width: 100px;
}
#keyframes pulse {
0% {
border: 1px solid rgba(255, 0, 0, 1)
}
100% {
border: 1px solid rgba(255, 0, 0, 0)
}
}
<div class="animation">
<div class="pulse"></div>
</div>
But i think you want to achieve a pulsating effect, therefore i would recommend you to use transform: scale() to create the desired effect.
#keyframes pulse{
from { transform: scale(1) }
to { transform: scale(.75) }
}
.pulse{
margin: 20px;
width:100px;
height: 100px;
border-radius: 100px;
background-color: red;
animation: pulse 1s ease infinite alternate;
}
<div class="animation">
<div class="pulse"></div>
</div>
Just add background-clip: padding-box; to the .pulse element. More info here. As said in the previous answer, you can also use the box-shadow, but you have to keep in mind that box shadow does not take space around the element. So You will have a different behavior.
.pulse {
background-clip: padding-box;
margin: 20px;
width:100px;
height: 100px;
background-color: red;
border-radius: 100px;
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#keyframes pulse{
0%{border:solid 1px rgba(255, 0, 0, 1)}
100%{border:solid 1px rgba(255, 0, 0, 0)}
}
<div class="animation">
<div class="pulse"></div>
</div>
I have a progress element like so:
body {
background: grey;
}
progress[value] {
-webkit-appearance: none;
appearance: none;
height: 25px;
width: 95%;
position: relative;
top: 10px;
right: 50%;
left: 2.5%;
}
progress[value]::-webkit-progress-bar {
background-color: rgba(255,255,255,0.2);
border-radius: 50px;
border: solid;
border-width: 0px;
border-color: rgba(255,255,255,0.1);
}
progress[value]::-webkit-progress-value {
background-image: repeating-linear-gradient(
45deg,
#fff,
#fff 10px,
#f9f9f9 10px,
#f9f9f9 20px
);
border-radius: 50px;
-moz-animation-name: move;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease;
-moz-animation-duration: 0.4s;
-moz-animation-delay: 1.5s;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: move;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 0.4s;
animation-delay: 1.5s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 1.5s;
animation-play-state: running;
}
#keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
<progress max="100" value="80"></progress>
And I have used CSS animations, however for some reason they do not work. I want the stripes to move horizontally, infinitely. Is there any reason to why this doesn't work?
Note - <progress> is not well supported by IE. See this for a complete guide to make it work across browsers. Below demo is the simplified animation without <progress> element.
body {
background-color: #666;
}
div {
background-color: #999;
border-radius: 30px;
height: 30px;
}
div > div {
background-image: repeating-linear-gradient(-45deg, #fff, #fff 10px, #ccc 10px, #ccc 20px);
background-size: 28px 30px;
animation: progress 2s linear infinite;
width: 50%;
}
#keyframes progress {
0% { background-position: 0 0; }
100% { background-position: 28px 0; }
}
<div><div></div></div>
I have replicated a demo of my problem but solution to a relatively simple problem:
Fiddle
I have four circular divs each with a unique background image (That is why the bg image is inline) but I wish to fade out or overlay the image with a colour and ensure the text dosnt fade out but retains its full opacity.
I have tried numerous things such as simply just changing the opacity on the hover etc but struggling here.
<div class="faces-container">
<div class="faces" style="background-image: url('http://i.huffpost.com/gen/1697767/thumbs/o-GAME-OF-THRONES-facebook.jpg');">
<span class="name">Dan</span>
</div>
</div>
.faces-container{
height: auto;
overflow: auto;
text-align: center;
margin: 0;
box-sizing: border-box;
padding: 20px 20px;
display: inline-block;
-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s; /* Firefox < 16 */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera < 12.1 */
animation: fadein 3s;
}
.faces{
border-radius: 200px;
height: 200px;
width: 200px;
background-size: cover;
-webkit-transition : all 500ms ease-out;
-moz-transition : all 500ms ease-out;
-o-transition : all 500ms ease-out;
transition : all 500ms ease-out;
color: transparent;
line-height: 200px;
font-size: 2.5em;
}
.faces:hover{
cursor: pointer;
-moz-box-shadow: 0px 0px 10px 5px #aaa;
-webkit-box-shadow: 0px 0px 10px 5px #aaa;
box-shadow: 0px 0px 10px 5px #aaa;
color: #F7CA18;
}
JSFiddle
I removed your inline background-image for the .faces and replaced it with
background-image: linear-gradient( rgba(0,0,0,0.7), rgba(0,0,0,0.7) ), url('http://i.huffpost.com/gen/1697767/thumbs/o-GAME-OF-THRONES-facebook.jpg');
on your .faces class.
I didn't get the point about /unique/ name and inline style declaration. This makes no sense. You can just have it like that:
<div class="faces face-1"></div> and then face-2 and etc, where all the common styles for the elements will be stored in faces, and the hover state will be handeled in faces-x and faces-2.
Example
.faces:hover > span.name{
opacity: 0.5
}
Change your code to this
.faces-container,.faces,.name{transition : all 500ms ease-out;box-sizing: border-box}
.faces-container{
height: auto;
text-align: center;
margin: 0;
padding: 20px 20px;
display: inline-block;
animation: fadein 3s;
height: 200px;
width: 200px;
position: relative
}
.faces{
border-radius: 200px;
height: 100%;
width: 100%;
background-size: cover;
transition : all 500ms ease-out;
color: transparent;
line-height: 200px;
font-size: 2.5em;
position: absolute;
left: 0;
top: 0
}
.name{
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,0,0)
}
.faces-container:hover .faces{
box-shadow: 0px 0px 10px 5px #aaa;
z-index: 1;
opacity: 0
}
.faces-container:hover .name{
cursor: pointer;
color: #F7CA18;
z-index: 2;
opacity: 1
}
<div class="faces-container">
<div class="faces" style="background-image: url('http://i.huffpost.com/gen/1697767/thumbs/o-GAME-OF-THRONES-facebook.jpg');"></div>
<span class="name">Dan</span>
</div>