I have a few animations but I noticed that in IE and Edge my animations are slower and also one of the animations is not visible at all. It is just fine in chrome and Firefox. The box shadow is the one that is not visible at all. Any ideas why its not visible and why it is slower (looks like it is not as smooth)?
#keyframes fadeInAndOut {
17% {
opacity: 1;
box-shadow: 0 0 20px 23px #fff;
}
25% {
opacity: 0;
box-shadow: 0 0 31px 23px #fff;
}
92% {
opacity: 0;
box-shadow: none;
}
}
Smoothness:
with CSS animations/transitions you should always animate props that do not affect layout: transform and opacity. You could animate other things like margins and so but thread that does the job of CSS animations/transitions is not good with props that require layout recalculation. So, for box-shadow and anything other then transform and opacity use JavaScript animations.
Non-working animations:
Incorrect keyframe rule - animatable values in keyframes declaration should always be numeric (not things like none).
Related
I have the following button that animates the box-shadow spread property (the semi-transparent outline grows from 0 to say 3px on hover) since there are no obvious alternatives. While box-shadow isn't yet GPU accelerated, filter: drop-shadow() is, but doesn't support the spread value which is a dealbreaker for this design.
I'm not sure to what degree is the filter property accelerated as this post from Chrome dev blog isn't overly specific, but since the filter CSS property can reference an SVG filter besides the built-in functions, I have 2 questions:
How, if at all, are complex SVG filters referenced by id accelerated in major browsers?
If it makes sense performance-wise compared to box-shadow, how would I best achieve an animated shadow spread as the above described design using SVG filters (eg. imitate box-shadow spread as a hard outline)?
edit: I am aware I could fake this effect using an element behind the button and animating scale, but I'd like to explore the filter possibilities present here.
button {
appearance: 'none';
box-shadow: 0 0 0 0 hsla(360, 80.5%, 55.7%, 0.1);
transform: scale(5);
transform-origin: 0 0;
margin: 20px;
transition: box-shadow 180ms ease-in-out;
}
button:hover {
box-shadow: 0 0 0 3px hsla(360, 80.5%, 55.7%, 0.1);
}
<button>Button</button>
This question already has answers here:
How does this CSS produce a circle?
(5 answers)
Closed 4 years ago.
How about friends, I'm new to the topic of CSS. I am trying to perform to pulse effect as you can see in this image.
I would like my menu icon (icon next to word "Home") to have a similar animation.
My problem is that I do not know how to achieve a perfect circle where to achieve this animation. This is my current result:
What I can do?
this is my code:
https://multi-level-side-menu-4bj1tj.stackblitz.io
ion-header button[ion-button].bar-buttons {
border-radius: 10px;
background: transparent;
box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
animation: pulse 1.5s infinite;
}
ion-header button[ion-button].bar-buttons:hover {
animation: none;
}
#keyframes pulse {
0% {
transform: scale(0.9);
}
70% {
transform: scale(1);
box-shadow: 0 1 0 10px rgba(90, 153, 212, 0);
}
100% {
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
}
}
I share the source code that I am doing, if you want to edit something, you must modify the app/app.css file, to see in real time.
thank you!
In order to achieve a perfectly round shape you'll need to have perfect square to begin with. So, for instance, your button will need to have dimensions like width: 32px; height: 32px. To turn a square into a circle you'll have to apply a border radius of 50% e.g. border-radius: 50%.
To create a perfect circle you need equal width and height as well as border-radius of 50%
width: 50px;
height: 50px;
border-radius: 50%;
The animation you reference is part of Google's Material Design, this is a very sophisticated CSS animation. It is possible to recreate it from scratch but that will take time.
The core of what you need is the circle to grow in size and a box-shadow to pulse out.
I've created a simplified version here
https://codepen.io/suth_a/pen/NBVNXE?editors=1100
you create animations by defining them with #keyframes name
#keyframes pulse{
100%{
box-shadow: 0 0 20px 3px #5a99d4;
transform: scale(1.2);
}
}
on hovering the animation is initiated
div:hover{
animation: pulse 1s ease-in-out infinite alternate;
}
pulse - is the name of the animation I created
1s - is the length of the animation
ease-in-out - is the easing function - https://css-tricks.com/ease-out-in-ease-in-out
infinite - tells the browser to repeat the animation indefinitely
alternate - tells the browser that at the end of each animation it should begin from the ending and work back to the beginning, that way
the animation looks smooth.
You can take my animation and work on it until you get something closer to what you want but if you're really set on that exact animation then add material design to your project and you can create buttons like this in no time
https://materializecss.com/getting-started.html
<a class="btn-floating pulse"><i class="material-icons">menu</i></a>
https://materializecss.com/pulse.html
Add the following css properties to the pulse icon (circle).
height:40px; width:40px; border-radius:50%
If the height and width don't suit your needs then you can increase them proportionally so that they are always equal to each other.
I want to hide an HTML element when the page loads, then fade it in with a CSS transition. My plan is to set the opacity to 0, and then use a CSS animation to transform it to 1.
But I am worried that the content will remain hidden in old browsers that can't handle CSS transitions.
Is there a safer way to hide the content? Or to exclude this code from browsers that can't handle it?
As always, your problem is with older versions of IE.
http://caniuse.com/#feat=css-animation
I'm a big believer in progressive enhancement amd handling things CSS only.
Using Javascript could provide fallback for older browser or using libraries like Modernizr but I hate these kind of solutions and they come with there own problems. What if the visitor has JS disabled?
Luckily we can safely let older browser ignore the fade in animation. Just set opacity on 1 for the default div you want to fade in and start the keyframe animation at opacity set to 0.
div {
height: 300px;
width: 300px;
background-color: red;
opacity: 1;
animation: fadeIn 7s ease infinite;
}
#keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
https://jsfiddle.net/3rzL0xz8/
Loader has a strange blurry patchy color. Original loader doesn't look like the one attached. Please see attachment and the below code. [![enter image description here][1]][1]
#acp-overlay
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: black;
-moz-opacity: 0.3;
opacity:.3;
filter: alpha(opacity=30);
z-index: 10000;
}
#ajaxcartpro-progress{
border: none;
position: fixed;
text-align: center;
padding: 0px;
background-color: transparent;
z-index: 999999;
color: black;
max-width: 200px;
/*position:absolute;*/
/*top: expression(parseInt(document.documentElement.scrollTop, 10) +window.ACPTop+ "px");*/
}
Instead of using a GIF image to create the animation, have a look at CSS3 keyframe animations and use a PNG sprite.
EDIT: I think the Walsh's article describes it quite easily.
To start with, of course you need a container like <div class="loading"></div>
Then, using CSS, you set its background-image to a sprite containing the animation in steps. Basically, what occurs here, is that you show only a part of the background each refresh and thus create the animation. The browser does nothing but pushes the background-position (or other attributes too) with time like this:
#keyframes loadinganim {
0% {background-position: -6864px 0; } # starting position depending on the sprite image
100% {background-position: 0 0;} # where should the animation end
}
.loading {
background-image: url(images/loadingSprite.png); # path to the sprite
animation: loadinganim 3.75s steps(44) infinite; # what's the animation called, how often it should refresh, how many steps, and for how long it should last
# ... other attributes
}
This isn't supported by older browsers, however, so you need to provide a fallback (like a GIF image with a background). You might also need to prefix animation attribute to make it work in browsers like Safari:
.loading {
animation: # ...
-webkit-animation: # ..
# ... other attributes
}
I'm guessing it's a GIF image. GIF images don't support alpha transparency, so it's antialiased against a white background. But you're overlaying it on top of a background that isn't white, so you see the gray pixels that are supposed to blend in with the white.
I have some slide animation in css. There is any chance to keep this effect?
#arch{
margin-top:5%;
width:222px;
height:222px;
background-image:url(img/arch.jpg);
box-shadow:0px 0px 3px #000000;
}
#arch:hover{
-webkit-animation:przesuniecie 1s 1 alternate;
}
#-webkit-keyframes przesuniecie
{
from {width:222px;}
to {width:0px;}
}
I'm guessing you mean to have to the element slide away on hover, and slide out when the mouse leaves? I suggest putting the :hover on the parent element:
*:hover > #arch{
-webkit-animation:przesuniecie 1s 1 alternate;
}
#-webkit-keyframes przesuniecie
{
from {width:222px;}
to {width:0px;}
}
Depending on what the parent element is, you may need to wrap the #arch element in a <div>.
Also, you may need to use CSS transitions instead of CSS animations, so that the animation doesn't abruptly end on mouseout:
#arch{
-webkit-transition:width 1s;
width: 220px;
}
*:hover > #arch{
width: 0;
}
(Don't forget to include the other variations of the property for the other browsers)
Remove the :hover event and let it sit.