I am using react's CSS animations add-on and everything works fine when I use their provided classnames.
.quote-enter {
opacity: 0.01;
transition: opacity .25s ease-in;
}
.quote-enter.quote-enter-active {
opacity: 1;
}
.quote-leave {
opacity: 1;
transition: opacity .25s ease-in;
}
.quote-leave.quote-leave-active {
opacity: 0.01;
}
but when I try to convert that to an attribute selector method to catch each instance of component that should animate, it doesn't work, no selector matches.
[class$='-enter'] {
opacity: 0.01;
transition: opacity .25s ease-in;
}
[class$='-enter'][class$='-enter-active'] {
opacity: 1;
}
[class$='-leave'] {
opacity: 1;
transition: opacity .25s ease-in;
}
[class$='-leave'][class$='-leave-active'] {
opacity: 0.01;
}
The $= operator matches the end of the whole attribute, so if the class you're targeting isn't the last one of the element (say class="whatever-enter other-class"), the selector won't match.
You can try this:
[class$='-enter'], [class*='-enter '] {
opacity: 0.01;
transition: opacity .25s ease-in;
}
[class$='-leave'], [class*='-leave '] {
opacity: 1;
transition: opacity .25s ease-in;
}
It will become more complex when combining two classes (2*2 = 4 selectors), so maybe you'll be better off sticking to the *=operator alone:
[class*='-enter'] {
opacity: 0.01;
transition: opacity .25s ease-in;
}
[class*='-enter'][class*='-enter-active'] {
opacity: 1;
}
[class*='-leave'] {
opacity: 1;
transition: opacity .25s ease-in;
}
[class*='-leave'][class*='-leave-active'] {
opacity: 0.01;
}
This will work as long as you don't have any other classes ending with these suffixes.
Related
I have set up css animation for my background images, it works fine on chrome but not on firefox and safari, do you have any idea how to make this work?
Homepage: http://argeville.projet-inwie.com/
My css for animation:
#test1
{ transition: background 0.4s ease-in-out;
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
-moz-transition: background 0.4s ease-in-out; -ms-transition: background 0.4s ease-in-out;
}
Thank's
Maybe more code and details could help...
First thing, check this tool when you need to make your CSS compatible with "all" browsers.
Autoprefixing tool
Check this post too: https://css-tricks.com/almanac/properties/t/transition/
As they say: IE10 (the first stable version of IE to support transition) does not require the -ms- prefix.
So this code is enought:
#test1 {
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
transition: background 0.4s ease-in-out;
}
Maybe try to install the latest version of browsers that don't work well.
Empty browser cache?
Try to apply another property instead of background to deduce if it's transition or background property that makes trouble.
Happy coding!
Thanks for your help.
I tried your code but it still doesn't work.
Here is the set of code to manage the different background of my home with the passage of the mouse.
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.test2').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test2').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test3').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/aromes.jpg)');
});
$('.test3').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test5').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/centres.jpg)');
});
$('.test5').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test4').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/parfums.jpg)');
});
$('.test4').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
}); });
</script>
<style>
#test1{
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
transition: background 0.4s ease-in-out;
}
</style>
You are correct that the transition does not work on Firefox.
Here is a simple snippet to show the problem:
#test1
{
transition: background 0.4s ease-in-out;
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
-moz-transition: background 0.4s ease-in-out;
-ms-transition: background 0.4s ease-in-out;
background-image: url(https://picsum.photos/id/1015/200/300);
height: 200px;
width: 200px;
}
#test1:hover {
background-image: url(https://picsum.photos/id/1016/200/300);
}
<div id="test1"></div>
It depends on exactly what you want, but one way round it in this simple case is to not attempt a transition on the main element but to have the background images on before and after pseudo elements and fade them in and out. (They need to not be in the actual element because the opacity changes would affect its other content).
Hover on the image to get it to transition to another one.
#test1
{
position: relative;
height: 200px;
width: 200px;
}
#test1::before, #test1::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.4s ease-in-out;
}
#test1::before {
background-image: url(https://picsum.photos/id/1015/200/300);
opacity: 1;
}
#test1::after {
background-image: url(https://picsum.photos/id/1016/200/300);
opacity: 0;
z-index: -1;
}
#test1:hover::before {
opacity: 0;
}
#test1:hover::after {
opacity: 1;
}
<div id="test1"></div>
I have a div element, which I have initially kept at Zero '0' opacity.
On certain event I add a class with transition 0.3s and opacity '1'.
But I want transition to to end on out immediately (set 0 opacity without transition when class is removed).
div{
opacity: 0;
transition: opacity 0.3s ease-in;
}
div:hover{
opacity: 1;
}
Tried only with ease-in, and also cubic-bezier(), but somehow I can't do it.
Just move your transition to 'hover' state.
div{
opacity: .5;
}
div:hover{
opacity: 1;
transition: opacity 0.3s ease-in;
}
<div>hello world!</div>
try
div {
height:150px; width:150px; background:red;
opacity: 0;
}
div:hover {
opacity: 1;
transition: opacity 0.3s ease-in;
}
Put cursor below
<div></div>
It looks so simple but I can handle to make it work.
When a new element is added to my list, I want the others elements to move to let the space for the new one and then the new one has to appear with a fade transition.
I can't make this simple animation. I can make the others elements to move but my new element does not have any fade transition. It just appears! BIM.
Here's a codepen : https://codepen.io/MuyBien/pen/OEqNEQ
.fade-enter-active {
transition: opacity .3s ease-out;
transition-delay: .3s;
}
.fade-enter {
opacity: 0;
}
.fade-enter-to {
opacity: 1;
}
.fade-move {
transition: transform .3s;
}
.fade-enter-active {
transition: opacity 1s ease-out;
transition-delay: 1s;
}
.fade-enter {
opacity: 0;
}
.fade-enter-to {
opacity: 1;
}
.fade-move {
transition: transform 1s;
}
You can just delay the entry.
I am setting my CSS animation type to forwards so that the finished frame of the animation is the default state when finished.
But now, the transition that animates the same property (transform) is not working anymore...
I have to use forwards because otherwise the opacity resets to 0 after animating.
How can I enable a transition as soon as an animation has finished? I am looking for a CSS-only option without javascript.
CSS
album {
opacity: 0;
animation:movein 0.6s forwards;
transition: all 0.3s ease-in-out;
}
album:hover {
transform:scale(1.05); // this doesn't work
box-shadow: 0px 0px 45px rgba(0,0,0,0.5); // this works
}
#keyframes movein {
from {
opacity:0;
transform: translateX(-100px);
}
to {
opacity:1;
transform: translateX(0px);
}
}
album:nth-child(2) {
animation-delay: 0.2s; // delay keeps opacity 0 for a while
}
album:nth-child(3) {
animation-delay: 0.4s; // delay keeps opacity 0 for a while
}
One solution could be to split up your animation. Only the fadein animation has animation forwards.
album {
opacity: 0;
animation:movein 0.6s, fadein 0.6s forwards;
transition: all 0.3s ease-in-out;
}
#keyframes movein {
from {
transform: translateX(-100px);
}
to {
transform: translateX(0);
}
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
I'm trying to make something like fullpage.js. I have an active element and previous element. When I'm scrolling I have transform property on the both blocks, one like
.active {
transform: translateY(0);
opacity: 1;
transition: all 1s ease;
}
And another is
.previous {
transform: translateY(100vh);
opacity: 0;
transition: all 1s ease;
}
Without transition they appear in a moment without any delay. But when I add transition they starting to blink because of the opacity. How can I make the block first to transform and then to lose it's opacity
You can simply define multiple transitions:
div {
width: 200px;
height: 200px;
background: orange;
opacity: 0.5;
transition: transform 0.5s ease 0s, opacity 0.5s ease 0.5s;
}
body:hover div {
transform: rotate(45deg);
opacity: 1;
}
<div></div>