If I use this code
#-webkit-keyframes blurMe{
0% {
-webkit-filter: blur(5px);
}
100% {
-webkit-filter: blur(0px);
}
}
It will work.
But if I add this:
0% {
-webkit-filter: blur(5px);
-webkit-transform: scale(4,4);
}
100% {
-webkit-filter: blur(0px);
-webkit-transform: scale(1,1);
}
The element I use this keyframes only show scale (from 4 to 2), the blur always be 4px;
that means when getting 100%, -webkit-filter: blur(0px) didn't work. Why?
(using Chrome).
Most probably this is a Chrome bug. But you should realise that when you are three unstable (prefixed) features together, you'll get a result that is unstable^3.
As a workaround you may use two elements and apply different animation to each one:
<div class="outer">
<div class="inner"></div>
</div>
.outer,
.inner {
-webkit-animation: 3s infinite;
}
.outer {
-webkit-animation-name: scaleMe;
}
.inner {
width: 100%;
height: 100%;
-webkit-animation-name: blurMe;
}
#-webkit-keyframes blurMe {
from { -webkit-filter: blur(5px); }
to { -webkit-filter: blur(0); }
}
#-webkit-keyframes scaleMe {
from { -webkit-transform: scale(4); }
to { -webkit-transform: scale(1); }
}
Demo: http://jsfiddle.net/YNLhu/2/
Related
I have an icon that initially has a box shadow set. I am animating the icon and scaling it, but I would also like to remove the shadow while I am doing it. I have tried it like this:
.loading-icon {
width: 80px;
height: 80px;
animation-name: earth;
animation-timing-function: ease-in-out;
animation-duration: 3s;
}
#keyframes earth {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5) { box-shadow: none; };
}
}
But, this is not working, how can I do that?
In keyframes you've extra {} surrounding box-shadow which is not needed.
#keyframes earth {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5);
box-shadow: none;
}
}
I understand this animation should work on SVGs as it does on HTML elements but obviously I am wrong!
How do I achieve this effect with CSS on an SVG? Fiddle here.
div {
background: blue;
width: 400px;
height: 100px;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#keyframes example {
0% {
filter: brightness(1);
filter: contrast(1);
-webkit-filter: brightness(1);
-webkit-filter: contrast(1);
}
50% {
filter: brightness(0.1);
filter: contrast(0.1);
-webkit-filter: brightness(0.1);
-webkit-filter: contrast(0.1);
}
100% {
filter: brightness(1);
filter: contrast(1);
-webkit-filter: brightness(1);
-webkit-filter: contrast(1);
}
}
Change the div from css to svg . It works for me.
Or if you want to see both the div and svg, just add div, svg { css code..}
Example: http://jsfiddle.net/4ebv7jzd/1/
So, simple question:
I have an element, which has a animation in its normal state - a transform-animation (perspective, rotateX and rotateZ - but just rotateZ changes) which runs constantly. On :hover I want to change that animation (remove the rotateX and perspective transform, but keep the rotateZ animation) - that's no problem, but I want the animation transition into the new animation and I have no clue how to accomplish that.
JSFiddle
from:
#-webkit-keyframes rotatespace {
0% {
transform:perspective(555px) rotateX(55deg) rotateY(0deg) rotateZ(0deg) scale(1.25);
}
100% {
transform:perspective(555px) rotateX(55deg) rotateY(0deg) rotateZ(360deg) scale(1.25);
}
}
to:
#-webkit-keyframes rotateflat {
0% {
transform:perspective(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25);
}
100% {
transform:perspective(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scale(1.25);
}
}
Instead of applying all the transform styles to one element you could use the :before pseudo element for the animated block and the element itself for the "3D" effect (the rotateX).
Example:
.block {
position: absolute;
top:100px;
left:100px;
width: 100px;
height:100px;
transform-origin: center center 0px;
overflow:visible;
transform:perspective(555px) rotateX(55deg) scale(1.25);
transition:transform .5s;
}
.block:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: blue;
animation-name: rotatespace;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-timing-function: linear;
}
.block:hover {
transform:perspective(555px) rotateX(0deg) scale(1.25);
}
#keyframes rotatespace {
0% {
transform:rotateZ(0deg);
}
100% {
transform:rotateZ(360deg);
}
}
<div class="block"></div>
I have this code:
.blur {
-webkit-animation: blur 5s ;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes blur {
0% { -webkit-filter: blur(0px); }
0% { -webkit-filter: blur(1px); }
50% { -webkit-filter: blur(5px); }
60% { -webkit-filter: blur(5px); }
100% {
opacity: 0;
}
}
<img src="http://placehold.it/350x150" class="blur" />
Basically I have an image and the effect that I want is to fade it in slowly, blur it and then fade it out. But when it blurs I want it to stay there for few seconds and then fade out the picture. Could you please help me out? Thanks
Thinking in terms of keyframes, you want to let the animation know when to start fading. Otherwise it assumes you're working towards your final opacity for the duration of the animation.
To prevent this, pin your opacity at 1 just prior to beginning the fade. You could try something like this:
.blur {
-webkit-animation: blur 5s ;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes blur {
0% { -webkit-filter: blur(0px); }
0% { -webkit-filter: blur(1px); }
50% { -webkit-filter: blur(5px); }
60% { -webkit-filter: blur(5px); }
90% {
-webkit-filter: blur(5px);
opacity: 1;
}
100% {
opacity: 0;
}
}
<img src="http://placehold.it/350x150" class="blur" />
The above code only starts the fadeout in the last 10% of the animation - otherwise, the blurred image hangs around. You can nudge this duration with both your .blur duration and your keyframe percentages (larger percentage spread = longer time before fading out).
I've been searching the answer for awhile but all I can see is translating an object in circular path. Is there a way to translate an element on an ellipse path given the semiminor and semimajor axis? Thanks alot!
the jfiddle of belows answer
css3
Have a look at this page, it explains mostly all you should know about translations with CSS3. Just as reminder: it is also possible to set keyframes you could use to definie your edge points of a spline you want to animate.
keyframes are explained here.
in your case it is a animation of two nested elements.
#1 for the picture or element you want to animate, where you define a X tranlate with ease
#2 and one as outer box for that #1 you animate the Y translate with.
if you arrange them clever in the same timescale but different ease in or out you can make your ellipse happen.
<style>
.viewport {
position:relative;
width:640px;
height:480px;
border:1px dashed #000;
}
.moveX {
position:absolute;
background:#f00;
height:2px;
width:480px;
top:240px;
left:0px;
-webkit-animation: mX 5s ease-in-out 0s infinite;
animation: mX 5s ease-in-out 0s infinite;
}
.moveY {
position:absolute;
width:480px;
height:100px; top:-50px;
border:1px solid #333;
-webkit-animation: mO 5s linear 0s infinite;
animation: mO 5s linear 0s infinite;
}
.elipsoid {
position:absolute;
background:url('http://placehold.it/100/00f/fff/&text=>°))><');
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border-radius:50%;
}
#keyframes mO {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes mO {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes mX {
0% { transform: translateX(0px); }
50% { transform: translateX(160px); }
100% { transform: translateX(0px); }
}
#-webkit-keyframes mX {
0% { -webkit-transform: translateX(0px) }
50% { -webkit-transform: translateX(160px); }
100% { -webkit-transform: translateX(0px) }
}
</style>
<div class="viewport">
<span class="moveX">
<div class="moveY"><span class="elipsoid"></span></div>
</span>
</div>