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>
Related
I made a button animation with CSS. If the cursor is hover at the button, the button will shrink, and when its not, its gonna grow. However, when you hover at the button, it keeps playing the animation after 2 seconds. Can you help me fix that?
button{
text-decoration: none;
border: none;
padding: 8px 30px;
background-color: green;
color: #fff;
outline: none;
box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
border-radius: 5px;
cursor: pointer;
animation: goForward;
animation-play-state: running;
animation-iteration-count: 1;
animation-duration: 2s;
}
button:hover{
animation: goBack;
animation-play-state: running;
animation-duration: 2s;
animation-iteration-count: 1;
}
#keyframes goBack{
from{transform: scale(1)}
to{transform: scale(0.72)}
}
#keyframes goForward{
from{transform: scale(0.72)}
to{transform: scale(1)}
}
Better and simple approach is to use transition than animation.
button {
text-decoration: none;
border: none;
padding: 8px 30px;
background-color: green;
color: #fff;
outline: none;
box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
border-radius: 5px;
cursor: pointer;
transform: scale(1);
transition: transform ease 2s;
}
button:hover {
transform: scale(0.72);
}
<button>Click Me</button>
i've got following problem:
when im using transform scale for hover the image shows judder.
Here my Code:
<div class="item">
</div>
.item {
background: transparent url("http://s14.directupload.net/images/141019/s3r8avxj.jpg") no-repeat 0 0 / 176px 176px;
width: 176px;
height: 176px;
display: inline-block;
font-family: Arial;
margin: 0px 10px 10px 0px;
border: 5px solid #fff;
-webkit-box-shadow: 0 0 2px 1px rgba(0,0,0,0.4);
box-shadow: 0 0 2px 1px rgba(0,0,0,0.4);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.item:hover {
transform: scale(1.05);
border: 5px solid #fff;
cursor: default;
}
Fullscreen view: http://jsfiddle.net/excsa15w/embedded/result/
Code: http://jsfiddle.net/excsa15w/
Is there a possibility to remove the judding?
Thanks in advance
Change property
background: transparent url("http://s14.directupload.net/images/141019/s3r8avxj.jpg") no-repeat 0 0 / 176px 176px;
To
background: transparent url("http://s14.directupload.net/images/141019/s3r8avxj.jpg") no-repeat;
jsfiddle
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/
I would like a css animation which creates this:
http://line25.com/wp-content/uploads/2010/text-shadow/demo/index.html#boardgame
But the shadows drop down from the top of the screen and fall into position...is this possible? If not what's the best way to achieve this sort of effect.
#boardgame h1 {
text-align: center;
margin: 200px auto;
font-family: "League-Gothic", Courier;
font-size: 200px; text-transform: uppercase;
color: #fff;
text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;
}
You can set the text shadow on a pseudo element, and animate that:
body {
background-color: lightblue;
}
h1#boardgame {
text-align: center;
margin: 100px auto;
font-family: "League-Gothic", Courier;
font-size: 200px; text-transform: uppercase;
color: #fff;
position: relative;
}
h1:after {
position: absolute;
content: "My header";
left: 0px;
top: 0px;
width: 100%;
height: 100%;
color: transparent;
text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;
z-index: -1;
-webkit-animation: slide 5s;
animation: slide 5s;
}
#-webkit-keyframes slide {
0% {-webkit-transform: translateY(-100%);}
100% {-webkit-transform: translateY(0%);}
}
#keyframes slide {
0% {transform: translateY(-100%);}
100% {transform: translateY(0%);}
}
fiddle
alternate fiddle
According to this answer, it is possible: https://stackoverflow.com/a/9540707/451962
#box {
width: 50px;
height: 200px;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-kthtml-transition: all 1s linear;
transition: all 1s linear;
}
.shadow {
-webkit-box-shadow: 0px 0px 4px 2px #D50E0E;
-moz-box-shadow: 0px 0px 4px 2px #D50E0E;
box-shadow: 0px 0px 4px 2px #D50E0E;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-kthtml-transition: all 1s linear;
transition: all 1s linear;
}
JS Fiddle demo.
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;