i have the following CSS rule
*.highlight {
#-webkit-keyframes blink {
0% {
outline: 5px solid rgba(0, 0, 0, 0);
}
50% {
outline: 5px solid red;
}
100% {
outline: 5px solid rgba(0, 0, 0, 0);
}
}
#keyframes blink {
0% {
outline: 5px solid rgba(0, 0, 0, 0);
}
50% {
outline: 5px solid red;
}
100% {
outline: 5px solid rgba(0, 0, 0, 0);
}
}
animation: blink normal 1.5s infinite ease-in-out;
-webkit-animation-name: blink;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
box-sizing: border-box;
}
which works fine in all browsers, except safari. I have googled and googled and all the similar answers ive found revolve around transforms, which I am not using (here at least) can anyone help?
Thanks to #Joseph Silber previous answer in a previous answer I managed to get it working simply by changing the outline colour not the entire outline (see below).
#-webkit-keyframes blink {
0% {
outline-color: transparent;
}
50% {
outline-color: red;
}
100% {
outline-color: transparent;
}
}
#keyframes blink {
0% {
outline-color: transparent;
}
50% {
outline-color: red;
}
100% {
outline-color: transparent;
}
}
*.highlight {
animation: blink normal 1.5s infinite ease-in-out;
-webkit-animation-name: blink;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
outline: 5px solid red;
box-sizing: border-box;
}
Related
I need to fade the background-color of scrollbars from transparent to #333 when the page loads. I can't animate the overflow property even though I merely want to change it from hidden to auto because of superficial reasons imposed on designers/developers.
Unfortunately I can't seem to figure out how to do this using just CSS.
Here is my latest attempt:
#keyframes intro_scrollbars_webkit
{
from {background-color: transparent;}
to {background-color: #333;}
}
::-webkit-scrollbar-thumb
{
-webkit-border-radius: 0;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
animation-delay: 200ms;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-name: intro_scrollbars_webkit;
background-color: transparent;
}
Gecko (Waterfox, Pale Moon and Firefox) works perfectly:
#keyframes intro_scrollbars_standard
{
from {scrollbar-color: transparent transparent;}
to {scrollbar-color: #333 #000;}
}
*
{
animation-delay: 200ms;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-name: intro_scrollbars_standard;
scrollbar-color: transparent transparent;
}
Absolutely no JavaScript, frameworks, libraries, etc.
There is a keyframes animation for my button focused state. The problem is when the button comes in the focus state, the animation starts to play and that animation results in weird jumping of the button text.
How to prevent this weird shaky and jumpy behavior of text.
Thank you !
.btn-inline {
border: none;
color: #eb2f64;
font-size: inherit;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
display: inline-block;
background-color: transparent;
cursor: pointer;
transition: all .2s;
}
.btn-inline:hover {
color: #333333;
}
.btn-inline:focus {
outline: none;
animation: Pulsate 1s infinite;
}
#keyframes Pulsate {
0% {
transform: scale(1);
box-shadow: none;
}
50%{
transform: scale(1.05);
box-shadow: 0 1rem 4rem rgba(0, 0, 0, .25);
}
100%{
transform: scale(1);
box-shadow: none;
}
}
<button class="btn-inline">Albufeira, Portugal</button>
curious how I can get the color of my h1 text to stay on the current color in cycle after hovering and activating the rainbow animation!
h1 {
margin: 0;
font-size: 5em;
color: #00f;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
h1:hover{
-webkit-animation: rainbow 10s infinite;
}
#-webkit-keyframes rainbow{
20%{color: red; left 600ms 3s, top 1.5s 3s;}
40%{color: yellow; left 600ms 3s, top 1.5s 3s;}
60%{color: green; left 600ms 3s, top 1.5s 3s;}
80%{color: orange; left 600ms 3s, top 1.5s 3s;}
100%{color: blue; left 600ms 3s, top 1.5s 3s;}
You can rely on the animation-play-state property like this:
h1 {
margin: 0;
font-size: 5em;
color: #00f;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
animation: rainbow 10s infinite;
animation-play-state: paused;
}
h1:hover {
animation-play-state: running;
}
#keyframes rainbow {
20% {
color: red;
}
40% {
color: yellow;
}
60% {
color: green;
}
80% {
color: orange;
}
100% {
color: blue;
}
<h1>SOME TEXT</h1>
I created a CSS3 animation that works as intended, but on Internet Explorer the rotation is very jittery.
I'm creating a spinner loading indicator so I use CSS animations to do a transform: rotate(...);. On Chrome and other browsers, the rotation is smooth, but on Internet Explorer it appears slightly wobbly.
I tried setting the transform-origin: center, tried using straight pixel values instead of em units and various other things, but nothing seemed to work.
Any ideas on how to improve this animation?
If I make the "track" (border-color) that the quadrant spins upon completely transparent, it makes the effect less noticeable, but I figured I'd ask in case anyone has any ideas.
.loading {
display: inline-block;
font-size: 20px;
height: 1em;
width: 1em;
margin: 0 auto;
position: relative;
-webkit-animation: loading 1s infinite linear;
-moz-animation: loading 1s infinite linear;
animation: loading 1s infinite linear;
border-left: 0.25em solid rgba(0, 0, 0, .3);
border-right: 0.25em solid rgba(0, 0, 0, .3);
border-bottom: 0.25em solid rgba(0, 0, 0, .3);
border-top: 0.25em solid rgba(0, 0, 0, .8);
border-radius: 100%;
vertical-align: middle;
margin: 0 0.5em;
}
.loading * { display: none; }
#keyframes loading { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
#-moz-keyframes loading { from { -moz-transform:rotate(0deg); } to { -moz-transform:rotate(360deg); } }
#-webkit-keyframes loading { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } }
<div class="loading"></div>
So, I ended up using a 256x256 transparent PNG to replicate the effect without using CSS borders, due to IE not being able to render perfect circles with border-radius.
.loading {
display: inline-block;
font-size: 20px;
height: 1em;
width: 1em;
margin: 0 auto;
position: relative;
-webkit-animation: loading 1s infinite linear;
-moz-animation: loading 1s infinite linear;
animation: loading 1s infinite linear;
/*
**border-left: 0.25em solid rgba(0, 0, 0, .3);
**border-right: 0.25em solid rgba(0, 0, 0, .3);
**border-bottom: 0.25em solid rgba(0, 0, 0, .3);
**border-top: 0.25em solid rgba(0, 0, 0, .8);
*/
background-image: url(../images/loading.png);
background-size: 100% 100%;
border-radius: 100%;
vertical-align: middle;
margin: 0 0.5em;
}
I have a css animation, which it either repeat infinite or only a certain times. but I would like to play it like 2 times every 5 seconds.
Here is my code:
#countText{
-webkit-animation-name: color2;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 2;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 5s;
}
#-webkit-keyframes color2 {
0% { }
25% { text-shadow:-2px -5px 10px #fb0017, -5px 0px 10px #3a00cd, -5px 5px 10px #00ff3a}
50% { }
75% { text-shadow:2px 5px 10px #fb0017, 5px 0px 10px #3a00cd, 5px -5px 10px #00ff3a; }
100% {}
}
You can change the keyframes to show animation twice. First from 0% to 20% and next from 20% to 40%, then let it stay like that till 100%. Now change animation-duration to 5s with no animation-delay
#countText {
-webkit-animation-name: color2;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
}
#-webkit-keyframes color2 {
0% {
}
5%,25% {
text-shadow: -2px -5px 10px #fb0017,
-5px 0px 10px #3a00cd,
-5px 5px 10px #00ff3a;
}
15%,35% {
text-shadow: 2px 5px 10px #fb0017,
5px 0px 10px #3a00cd,
5px -5px 10px #00ff3a;
}
40% {
text-shadow: none;
}
}
Demo
.shk_this {
transform: translate3d(0, 0, 0);
animation-name: shakeMe;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes shakeMe {
2%, 18% {
transform: translate3d(-5px, 0, 0);
}
4%, 16% {
transform: translate3d(5px, 0, 0);
}
6%, 10%, 14% {
transform: translate3d(-5px, 0, 0);
}
8%, 12% {
transform: translate3d(5px, 0, 0);
}
18.1% {
transform: translate3d(0px, 0, 0);
}
}
<div class="shk_this">Shake This</div>