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.
Related
Please see: https://codepen.io/se7en/pen/QmLWNK
In MS Edge 16 adding a css drop shadow to an icon using something like filter: drop-shadow(0px 0px 2px red); causes the css animation to be shaky.
This doesn't seem to happen in any other browser.
CSS:
.icon {
width: 24px;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 12px 12px 0;
animation-duration: 4s;
animation-name: rotate;
filter: drop-shadow(0px 0px 2px red);
}
#keyframes rotate{
0%{
transform:rotate(0deg)
}
to
{
transform:rotate(360deg)
}
}
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;
}
I created a button. This button is defined by these CSS properties:
#button {
width: 50px;
height: 50px;
border: 3px solid #F1F2F0;
text-align:center;
background-color: #02BFC1;
display: table;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right:0;
-webkit-transition: all 0.5s ease;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
animation: blinker 2s ease infinite;
}
This button blinks using the animation blinker that smoothly changes the background-color from a darker to a lighter blue, defined like this:
#keyframes blinker {
50% { background-color: #03FCFF; }
}
It also has a hover animation:
#button:hover {
background-color: #F37C2B;
transform: scale(1.1);
box-shadow: 0px 0px 70px rgba(0,0,0,0.4);
animation-name: none;
}
My problem is this: the hover animation used to be completely smooth before I added the blinker animation. Now, it just instantly changes background-colorto the orange, while the transform: scale(1.1) still changes smoothly.
How can I make it so that hovering the button pauses the blinker animation and smoothly changes background-color, and that the animation resumes by mouse-leaving the button? If possible, I would like to use only CSS for this and no js.
If you prefer, you can modify this JSFiddle to respond.
EDIT: This doesn't work only on chrome, how can I make it so it does?
You have too many things going on in your CSS. As a general rule try to keep things as simple as possible if you want your code to be fast and efficient.
Here is your working code with some explanations:
button {
width: 50px;
height: 50px;
display: block;
border: 3px solid #F1F2F0;
background-color: #02BFC1;
margin: 30px auto;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
animation: 2s ease infinite blinker;
transition: background-color .5s ease, transform .5s ease, box-shadow .5s ease; /* it is best to select the properties you want to transition instead of using 'all' */
}
#keyframes blinker {
50% {
background-color: #03FCFF;
}
}
button:hover {
background-color: #F37C2B;
box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.4);
animation: none;
transform: scale(1.1);
}
<button></button>
Don't forget to use the prefixes needed for your project.
Here I have an animation that makes a blinking border next to the title you're hovering on:
#link_list a:hover {
border-left: 10px solid #E3E3E3;
animation: blink 1s infinite;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-o-animation: blink 1s infinite;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
#keyframes blink {
0% { border-left: 10px solid rgba(215, 215, 215, 1); }
50% { border-left: 10px solid rgba(215, 215, 215, 0); }
100% { border-left: 10px solid rgba(215, 215, 215, 1); }
}
Now, the problem is that the transition doesn't support the animation.
I already fixed it for the transition-in with the animation-delay property, but the transition-out doesn't work because the animation is running.
FIDDLE
This is a bit of a hack way to do this, but you can accomplish the effect you are looking for with positioning.
Basically, instead of setting the border width to be 0px when the links are not being hovered, set the width to 10px (the same as onHover) and use relative positioning to move the element to the left 10px, as if the border is not there.
Then set the animation of the left property to be 0.2s ease and set left: 0 in the :hover state.
#link_list a{
border-left: 10px solid transparent;
transition: border-left 0.2s ease, border-bottom 0.2s ease, border-right 0.2s ease, left 0.2s ease;
position: relative;
left: -10px;
}
#link_list a:hover {
left: 0px;
}
With this, you can remove the transition-delay as well.
JSFiddle
You should use left: -10px; property instead of transition-delay: 0.2s; animation properties, add this properties into things #link_list a{ },
Check this Demo jsFiddle
CSS
#link_list a{
color: inherit;
text-decoration: none;
border-left: 0px solid transparent;
border-width: 0px;
transition: border-left 0.2s ease, border-bottom 0.2s ease, border-right 0.2s ease;
left: -10px; // ADD THIS NEW
}
Ive read up quite a bit on this, but been struggling to get my head around it. I can find plenty of ways of animating the properties of a div on :hover, but I cant find anyway of just having properties animate without any user interaction.
Can someone show me how to get a div to pulsate, that is, animate the box-shadow property.
Something like
box-shadow: 0px 0px 10px #F00;
to
box-shadow: 0px 0px 20px #00F;
Many thanks.
You can do this via keyframes:
div{
height: 100px;
-moz-animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
-moz-animation-name: changeShadow;
-webkit-animation-name: changeShadow;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
border: 1px solid black;
}
#-webkit-keyframes changeShadow{
from {
box-shadow: 0px 0px 10px #F00;
}
to {
box-shadow: 0px 0px 20px #00F;
}
}
#-moz-keyframes changeShadow{
from {
box-shadow: 0px 0px 10px #F00;
}
to {
box-shadow: 0px 0px 20px #00F;
}
}
Here is a fiddle: http://jsfiddle.net/dc4f2/