Is there an animatable transition-property for css filters?
-webkit-transition : -webkit-filter 500ms linear
works in webkit. I don't know about filter support in FF or Opera.
I'm not sure I wholly understand your question.
CSS filter() Transformation/transition time
The property name in a declaration is always the portion before the colon, even if the value is a function. So, the corresponding transition-property
is filter
:
.event {
transition-property: -moz-filter, -ms-filter, -o-filter, -webkit-filter, filter;
transition-duration: 1s;
}
This applies not just to the filter
property, but also to properties like transform
and such that typically accept functions as values.
This also means that if you have, for example, multiple different filters or multiple transforms, all of them for a given property will be animated.
Add css transition while filtering
You missed:
Property display: none
CAN NOT be animated and not used with css transition smoothly
Explanation:
That is because a transition needs to have values is can change 'step by step' spread all over the transition-time.
Possible standard approach: reducing to zero height instead of display: none
:
On approach is to fade out and 'remove' an element by reducing it to zero height. Demonstration see example below this posting. BUT HEAD UP: as you see in the example that needs a fix height
set to the element which will be reduced. It does NOT work with auto
or min-height
for property height
.
Maybe better approach to your project: change html structure to grid
:
To smooth remove / reduce an auto-sized-height element (I assume that is what are you looking for) you can use another html structure. If you can work with grid
in this case you can easily smoothly reduce an auto-height-row by using transitions.
Yesterday we had a demo on this working horizontal. But same mechanic works on vertical structure as well. If you like you may have a look to that different horizontal example here:
https://stackoverflow.com/a/66742338/9268485
(Note: transitions in that example works on hover!)
Explaining example to approach 1:
$("#filter button").each(function () {
$(this).on("click", function () {
var tags = [];
var filtertag = $(this).attr('data-type');
tags.push(filtertag);
console.log("filtertag = " + filtertag);
if (filtertag === 'all') {
tags = [];
$('.record').removeClass('d-none');
} else {
$('.record').addClass('d-none');
for (let i = 0; i < tags.length; ++i) {
$('.record.' + tags[i]).removeClass('d-none');
}
}
});
});
.d-inline {
display: inline-block;
}
#filter {
margin-bottom: 20px;
}
.list_right {
color: white;
}
* {
box-sizing: border-box;
}
.record {
height: 38px;
padding: 10px 10px;
margin-bottom: 20px;
background-color: blue;
transition: all 5s ease;
}
.d-none {
height: 0;
padding: 0 10px;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
transition: all 5s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filter" class="d-inline">
<button type="button" data-type="all" class="">ALL</button>
<button type="button" data-type="proceeding" class="btn-active">Proceeding</button>
<button type="button" data-type="journal" class="">Journal Article</button>
</div>
<div class="wrap mcb-wrap mcb-wrap-hwqel1sdl one myfilter valign-top clearfix" style="">
<div class="mcb-wrap-inner">
<div class="column mcb-column mcb-item-ko9c4lj4p one column_list record proceeding">
<div class="list_item lists_2 clearfix">
<div class="animate fadeIn" data-anim-type="fadeIn">
<div class="list_right">My text 1</div>
</div>
</div>
</div>
<div class="column mcb-column mcb-item-03xff3oxj one column_list record proceeding">
<div class="list_item lists_2 clearfix">
<div class="animate fadeIn" data-anim-type="fadeIn">
<div class="list_right">My text 2</div>
</div>
</div>
</div>
<div class="column mcb-column mcb-item-kdy28db1t one column_list record journal">
<div class="list_item lists_2 clearfix">
<div class="animate" data-anim-type="fadeIn">
<div class="list_right">My text 3</div>
</div>
</div>
</div>
</div>
</div>
CSS animation causes filter transition to break (in chrome)
Turns out is was a bug in chrome. The version in which I was encountering the error was Version 102.0.5005.115, 64-bit.
As misterManSam pointed out, updating seems to solve the issue. After relaunching chrome to finish the update (now using Version 103.0.5060.66) the transition behaves as expected.
I assumed I had the latest version since chrome was not asking me to update, but annoyingly only by going to chrome://settings/help was I able to see that I had to restart chrome to finish updating. For anyone facing this issue, make sure your browser is fully updated by relaunching.
Animate/Transitions svg filter on image element
Here is one way to achieve the effect you want.
I'm using two copies of the image. The grey one on the bottom. And an unfiltered one on top that fades in when you hover.
img.grey { -webkit-filter: url(#gray-filter); filter: url(#gray-filter); opacity: 1; transition: filter 2s; -webkit-transition: filter 2s;}
img.real { opacity: 0; transition: opacity 2s; -webkit-transition: opacity 2s;}
img.real:hover { opacity: 1; transition: opacity 2s; -webkit-transition: opacity 2s;}
.fader { position: relative;}
.fader img { position: absolute;}
<svg style="position: absolute; width: 140px; height: 140px;"> <defs> <filter id="gray-filter"> <feColorMatrix type="luminanceToAlpha" result="L2A"></feColorMatrix> <feFlood flood-color="#b3b4bd" result="colorfield"></feFlood> <feBlend mode="multiply" in="L2A" in2="colorfield"></feBlend> <feComposite operator="in" in2="SourceGraphic"></feComposite> </filter> </defs></svg><div class="fader"> <img class="grey" src="http://iconshow.me/media/images/logo/brand-logo-icon/png/128/cocacola-128.png" /> <img class="real" src="http://iconshow.me/media/images/logo/brand-logo-icon/png/128/cocacola-128.png" /></div>
SVG filter with CSS transitions
SVG filters have a defined "filter region", inside which the effects are applied. This is because some operations can be very slow (eg. gaussian blur) and you generally want to limit the area over which they are calculated.
The default filter region of a filter is:
x="-10%" y="-10%" width="120%" height="120%"
In other words, the element being filtered, plus a 10% border around the outside of it. Anything outside that area will be clipped (and invisible).
The solution is to increase the filter region so that it encompasses all of your blobs. So, for example, if we increase the margin to 50%
<filter id="goo" x="-50%" y="-50%" width="200%" height="200%">
it now works properly.
body{ background:white; background-image:url(https://i.imgur.com/d47ZIU3.jpg); background-size:cover;}.blobs{ filter:url('#goo'); position:absolute; top:100px; left:200px;}
@keyframes blob-left-top-anim{ 0%{ transform:scale(1.1) translate(0,0); } 33%{ transform:scale(0.9) translate(-65px,0); } 62%{ transform:scale(0.7) translate(-65px,-65px);
} 94%{ transform:scale(1.1) translate(0,0); }}
@keyframes blob-right-top-anim{ 0%{ transform:scale(1.1) translate(0,0); } 33%{ transform:scale(0.9) translate(65px,0); } 64%{ transform:scale(0.7) translate(65px,-65px); } 96%{ transform:scale(1.1) translate(0,0); }}@keyframes blob-left-bottom-anim{ 0%{ transform:scale(1.1) translate(0,0); } 33%{ transform:scale(0.9) translate(-65px,0); } 66%{ transform:scale(0.7) translate(-65px,65px); } 98%{ transform:scale(1.1) translate(0,0); }}
@keyframes blob-right-bottom-anim{ 0%{ transform:scale(1.1) translate(0,0); } 33%{ transform:scale(0.9) translate(65px,0); } 68%{ transform:scale(0.7) translate(65px,65px); } 100%{ transform:scale(1.1) translate(0,0); }}.blob{ position:absolute; background:#e97b7a; left:50%; top:50%; width:100px; height:100px; line-height:100px; text-align:center; color:white; font-size:40px; border-radius:100%; margin-top:-50px; margin-left:-50px; animation:blob-left-top-anim cubic-bezier(0.770, 0.000, 0.175, 1.000) 4s infinite;}
.blob:nth-child(2){ animation-name:blob-right-top-anim;}.blob:nth-child(3){ animation-name:blob-left-bottom-anim;}.blob:nth-child(4){ animation-name:blob-right-bottom-anim;}
<div class="blobs"> <div class="blob">4</div> <div class="blob">3</div> <div class="blob">2</div> <div class="blob">1</div></div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo" x="-50%" y="-50%" width="200%" height="200%"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs></svg>
CSS backdrop-filter does not work with transition
Transitions enable you to define the transition between two states of an element. Your backdrop never changed state (it had the property backdrop-filter: blur(2px)
since the page was loaded), so the transition doesn't take effect.
What you're looking for is an animation:
.backdrop {
background-color: rgba(0, 0, 0, 0.25);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 1;
animation: blur-in 500ms 2s forwards; /* Important */
}
/* Let's define an animation: */
@keyframes blur-in {
from {
backdrop-filter: blur(0px);
}
to {
backdrop-filter: blur(2px);
}
}
Some text for testing the blur.
<div class="backdrop"></div>
Related Topics
An Efficient Way to Merge 2 Large CSS Files
Gooey CSS Effects with Contrast Parent
Fontello Glyph Font Odd Behaviour on Firefox, Shows Unicode Codes Instead of Icons
Textfield CSS Styling Using Javafx
Left/Right Float Button Inside Div
How to Stretch a Div to 100% Page Height
How to Select Multiple Input Field Types with CSS
Chrome Developer Tools Style Tab Showing Faded CSS Definition, Why
Relation Between Dp - Sp and Px
Google Map V3 Initializing with Horizontal Gray Line W/ Foundation in Chrome
Bootstrap-3 Align Links and Buttons at The Bottom of a Div
How to Have Multiple Svg Images in a Single File
CSS Stylesheets at Top or Bottom? or How to Solve Blank Page Issue
Jquery Mobile Set Width of 2 Elements to 80% and 20%
How to Hide One Column from Grid in Bootstrap Mobile Version