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/
Related
I have a series of div that can have their own padding values. Some of them have in addition the following "autoClose" class to make them totally disappear (not only hidden but shrinked to 0px)
.autoClose {
animation: shrinkDiv 5s forwards;
animation-timing-function: linear;
animation-delay: 3s;
}
#keyframes shrinkDiv {
from {opacity: 1; height: auto; padding: 20px 10px 20px 40px;}
to {opacity: 0; height: 0px; padding: 0px 0px 0px 0px;}
}
Is it possible to have 20px 10px 20px 40px padding value (as example in the 'from' line) depending on the actual padding value of the concerned div without using javascript ?
Exclude the "from" attribute from your animation. It should take the padding of the div automatically. Code example;
.autoClose {
animation: shrinkDiv 5s forwards;
animation-timing-function: linear;
animation-delay: 3s;
}
#keyframes shrinkDiv {
to {opacity: 0; height: 0px; padding: 0px 0px 0px 0px;}
}
https://jsfiddle.net/dqup2bvL/7/
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.
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.
I can't work out why this isnt working, I'v checked this against other examples, such as on codePen here:
http://codepen.io/NobodyRocks/pen/qzfoc
my css:
.text-header {
font-family: "oxygenlight";
text-transform: uppercase;
color:$bright-yellow;
-webkit-animation: yellowPulse 2s ease-in-out infinite alternate;
-moz-animation: yellowPulse 2s ease-in-out infinite alternate;
-ms-animation: yellowPulse 2s ease-in-out infinite alternate;
-o-animation: yellowPulse 2s ease-in-out infinite alternate;
animation: yellowPulse 2s ease-in-out infinite alternate;
}
#-webkit-keyframes yellowPulse {
from {
text-shadow:
1px 0px 25px rgba(248,235,51,1),
0px 1px 25px rgba(248,235,51,1),
-1px 0px 25px rgba(248,235,51,1),
0px -1px 25px rgba(248,235,51,1),
1px 4px 25px rgba(248,235,51,1);
}
50% {
text-shadow:
1px 0px 25px rgba(248,235,51,0),
0px 1px 25px rgba(248,235,51,0),
-1px 0px 25px rgba(248,235,51,0),
0px -1px 25px rgba(248,235,51,0),
1px 4px 25px rgba(248,235,51,0);
}
to {
text-shadow:
1px 0px 25px rgba(248,235,51,1),
0px 1px 25px rgba(248,235,51,1),
-1px 0px 25px rgba(248,235,51,1),
0px -1px 25px rgba(248,235,51,1),
1px 4px 25px rgba(248,235,51,1);
}
}
This is working for me. I added the transition-property from your reference in the css and set a default text-shadow. If you have an alternate animation and your from and to are equal than you don't need a 50%. Just make your 50% point the to and change the animation speed.
span {
display: block;
padding: 50px;
background: black;
text-transform: uppercase;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
color: #ff0;
text-shadow: 0px 0px 0px black;
-webkit-text-shadow: 0px 0px 0px black;
}
span:hover {
-webkit-animation: pulse 2s ease-in-out infinite alternate;
-moz-animation: pulse 2s ease-in-out infinite alternate;
-ms-animation: pulse 2s ease-in-out infinite alternate;
-o-animation: pulse 2s ease-in-out infinite alternate;
animation: pulse 2s ease-in-out infinite alternate;
}
#-webkit-keyframes pulse {
from {
text-shadow: 1px 1px 2px blue;
-webkit-text-shadow: 1px 1px 2px blue;
}
to {
text-shadow: 1px 1px 2px red;
-webkit-text-shadow: 1px 1px 2px red;
}
}
#-moz-keyframes pulse {
from {
text-shadow: 1px 1px 2px blue;
}
to {
text-shadow: 1px 1px 2px red;
}
}
#keyframes pulse {
from {
text-shadow: 1px 1px 2px blue;
}
to {
text-shadow: 1px 1px 2px red;
}
}
<span class="text-header">Title</span>
I'm trying to run multiple webkit animations at once. Demo can be seen here:
HTML:
<body>
<div class="dot"></div>
</body>
JavaScript:
$(function(){
$('body').append('<div class="dot" style="left:100px; top:200px"></div>');
});
CSS:
body{
background: #333;
}
.dot{
background: -webkit-radial-gradient(center, ellipse cover, #f00 90%, #fff 10%);
border-radius: 6px;
background: red;
display: block;
height: 6px;
position: absolute;
margin: 40px 0 0 40px;
width: 6px;
-webkit-box-shadow: 0 0 2px 2px #222;
-webkit-animation: shrink 2.s ease-out;
-webkit-animation: pulsate 4s infinite ease-in-out;
}
#-webkit-keyframes shrink{
0%{
-webkit-box-shadow: 0 0 2px 2px #222;
-webkit-transform: scale(2);
}
50%{
-webkit-box-shadow: 0 0 2px 2px #222;
-webkit-transform: scale(1.5);
}
100%{
-webkit-box-shadow: 0 0 2px 2px #222;
-webkit-transform: scale(1);
}
}
#-webkit-keyframes pulsate{
0%{
-webkit-transform: scale(1);
-webkit-box-shadow: 0 0 2px 2px #222;
}
50%{
-webkit-transform: scale(1.1);
-webkit-box-shadow: 0 0 2px 2px #111;
}
100%{
-webkit-transform: scale(1);
-webkit-box-shadow: 0 0 2px 2px #222;
}
}
.dot has two animations:
shrink
pulsate (hard to see but it's there)
Perhaps I need to find a good way sync them. Once shrink animation is done, pulsate. I can't run them both at once so pulsate is commented out in .dot.
Any suggestions? Thanks.
You can separate multiple animations with a , and set a delay on the second one if needed:
-webkit-animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;
2s in the second animation is the delay
Since Chrome 43 and Safari 9/9.2, the -webkit- prefix is only needed for Blackberry and UC (Android) browser. So the new correct syntax would be
animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;