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.
Related
This loading spinner I have created doesn't show the delay function at the moment I hover on the element, but it rotates a full turn before creating the animation on the second turn; how could I debug this issue?
Kindly, check my codepen code link so you can get what I mean, thank you.
Codepen
Each border of spin pseudo elements must move at different timing from the beginning when I hover on the element, I have set the animation delay function, and it works properly but not at the first turn.
This is how I wrote the code:
.spin {
margin: auto;
margin-top: 23px;
margin-bottom: 23px;
}
.spin div {
width: 50px;
height: 50px;
margin: auto;
border-radius: 50%;
border: 3px solid #2196f3;
border-bottom-color: transparent;
position: relative;
animation-name: spinning;
animation-duration: 1s;
animation-play-state: paused;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.spin div::before {
content: "";
position: absolute;
top: -3px;
right: -3px;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid orange;
border-bottom-color: transparent;
scale: 1.2;
animation-name: spinning;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-play-state: paused;
animation-timing-function: linear;
}
.spin div::after {
content: "";
position: absolute;
top: -3px;
right: -3px;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid black;
border-bottom-color: transparent;
scale: 1.4;
animation-name: spinning;
animation-duration: 2s;
animation-delay: 2s;
animation-play-state: paused;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.spin div:hover {
animation-play-state: running;
}
.spin div:hover::before {
animation-play-state: running;
}
.spin div:hover::after {
animation-play-state: running;
}
#keyframes spinning {
100% {
transform: rotate(1turn)
}
}
<div class="spin">
<div></div>
</div>
Commenting out the initial animation-delay: 1s causes the spinners to start immediately out of sync, which I believe is the behavior you are seeking.
.spin {
margin: auto;
margin-top: 23px;
margin-bottom: 23px;
}
.spin div {
width: 50px;
height: 50px;
margin: auto;
border-radius: 50%;
border: 3px solid #2196f3;
border-bottom-color: transparent;
position: relative;
animation-name: spinning;
animation-duration: 1s;
animation-play-state: paused;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.spin div::before {
content: "";
position: absolute;
top: -3px;
right: -3px;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid orange;
border-bottom-color: transparent;
scale: 1.2;
animation-name: spinning;
animation-duration: 2s;
/*animation-delay: 1s;*/
animation-iteration-count: infinite;
animation-play-state: paused;
animation-timing-function: linear;
}
.spin div::after {
content: "";
position: absolute;
top: -3px;
right: -3px;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid black;
border-bottom-color: transparent;
scale: 1.4;
animation-name: spinning;
animation-duration: 2s;
animation-delay: 2s;
animation-play-state: paused;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.spin div:hover {
animation-play-state: running;
}
.spin div:hover::before {
animation-play-state: running;
}
.spin div:hover::after {
animation-play-state: running;
}
#keyframes spinning {
100% {
transform: rotate(1turn)
}
}
<div class="spin">
<div></div>
</div>
As for how to debug it-- there is an "animations drawer" in the Chrome dev tools: you can learn more about the Chrome dev tools animations drawer in this blog post.
Problem is that your first animation spins all 3 of the elements. Your pseudo elements start spinning only after their delay is over. If you want to offset animations from the very beginning you have 2 options.
use negative animation-delay, so for example animation-duration: -2s;
use separate not nested elements for each spinning element.
I am trying to change colour of button after playing animation for some time. What I have searched and found that, it needs to change a new frame. Here is my CSS:
.header-button {
font-size: 12px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .8);
color: #fbd3cc;
text-decoration: none;
font-weight: normal;
height: 30px;
border: 1px solid rgba(255, 255, 255, .4);
border-radius: 3px;
-webkit-border-radius: 3px;
display: inline;
background: #026890;
}
#keyframes fadeIn {
from {
opacity: 0;
}
}
.animate-flicker {
animation: fadeIn 0.5s infinite alternate;
animation-iteration-count: 10;
-moz-animation-name: changecolor;
}
#keyframes changecolor {
{
color: red;
}
}
<button class="header-button animate-flicker">Menue
</button>
Can some one tell me how i can change the button colour after playing animation for 5 times in css
You need to make both animations either:
In the same keyframes
#keyframes fadeInNColor {
from {
opacity: 0;
}
to {
color: red;
}
}
or call each of them from the same rule
animation: fadeIn 0.5s infinite alternate, changecolor 0.5s infinite alternate forwards;
.header-button {
font-size: 12px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .8);
color: #fbd3cc;
text-decoration: none;
font-weight: normal;
height: 30px;
border: 1px solid rgba(255, 255, 255, .4);
border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
background: #026890;
}
#keyframes fadeIn {
from {
opacity: 0;
}
}
.animate-flicker {
animation:
fadeIn 0.5s infinite alternate, /* first animation*/
changecolor 0.5s infinite alternate forwards;/* second animation freezed */
animation-iteration-count: 5;
}
#keyframes changecolor {
to {
color: red;
}
}
<button class="header-button animate-flicker">Menue
</button>
you can add a span into the button tag and apply the color change to the span by delaying it by a few seconds to finish the nimation
Hope this is what you are looking for:
#keyframes changecolor
{
to {background:red;}
}
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
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 two div elements that I want both to puslate (CSS animation) if mouse hovers on any one of them. There a simple code following. In my page they are not next each other. The above code does not works.
jsfiddle: http://jsfiddle.net/GcyqL/1/
CSS:
#counter {
width:120px;
height:25px;
text-align: center;
border-style: solid;
border-width: 1px;
background-color: rgb(142, 197, 255);
font-weight: bold;
}
#mem_val {
width:120px;
height:25px;
text-align: center;
border-style: solid;
border-width: 1px;
background-color: rgb(142, 197, 255);
font-weight: bold;
}
div.intro:hover{
-webkit-animation: pulsate 1s infinite alternate;
-moz-animation: pulsate 1s infinite alternate;
-animation: pulsate 1s infinite alternate;
text-shadow: 0 0 8px #ccc;
}
#-webkit-keyframes pulsate {
from { box-shadow: 0 0 10px #333; }
to { box-shadow: 0 0 20px #c00; }
}
#-moz-keyframes pulsate {
from { box-shadow: 0 0 10px #333; }
to { box-shadow: 0 0 20px #c00; }
}
#keyframes pulsate {
from { box-shadow: 0 0 10px #333; }
to { box-shadow: 0 0 20px #c00; }
}
HTML
<div id="mem_val" class="intro" >mem_val</div><br><br>
<div id="counter" class="intro">counter</div><br><br>
If you want to do it only with CSS, you can add them both to the same container and use the container's hover selector.
Notice that this solution will make the hover animation even if the container is being hovered outside of these two elements. You can walk around this issue with a little trick that'll make the container stay "invisible", although it might be a bit non-flexible.
jsFiddle Demo
#container {
width:0;
height:0;
overflow: visible;
}
/* Old selector: div.intro:hover */
#container:hover div.intro {
-webkit-animation: pulsate 1s infinite alternate;
-moz-animation: pulsate 1s infinite alternate;
-animation: pulsate 1s infinite alternate;
text-shadow: 0 0 8px #ccc;
}
Add jQuery and here's a solution, DEMO
$(document).ready(function(){
$('.pulsate').hover(
function(){
$('.pulsate').addClass('intro');
},
function(){
$('.pulsate').removeClass('intro');
}
);
});
Just put them inside a container with display:inline; and then use
#container:hover div {
//plusate...
}
Demo: http://jsfiddle.net/GcyqL/8/
Pure css.