am looking for a solution to make some animations on an item when we try to load the next one.
Here is what i have:
Before i click i have this :
After Click:
I want to show the image in background when i click on the list element at the right side (Man, Woman...).
The backgroud image is hidden on the right, it exceeds the screen and this one is resized.
I need to hide the backgroundimage without resizing the screen, and show it when click with animation.
CSS:
img.slider__bg {
width: 100%;
position: absolute;
transform: translateX(100%);
-webkit-transform: translateX(100%);
transition: transform .5s 4s;
&.showBg {
animation: showBg 0.5s forwards;
-webkit-animation: showBg 0.5s forwards;
}
&.hideBg {
animation: hideBg 0.5s forwards;
-webkit-animation: hideBg 0.5s forwards;
}
#keyframes showBg {
100% { transform: translateX(0%); }
}
#-webkit-keyframes showBg {
100% { -webkit-transform: translateX(0%); }
}
#keyframes hideBg {
0% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}
#-webkit-keyframes hideBg {
0% { -webkit-transform: translateX(0%); }
100% { -webkit-transform: translateX(100%); }
}
}
Use conditional rendering to display the background image when you click. You need to declare a state to identify whether you clicked or not.
Related
I have to animate the Toast Notifications, I am currently using the transition to show it coming from the top. It looks good to me, I want to stop the sudden moving of the other toast notifications so harshly, any way they can cover space smoothly ?
Current CSS :
.slds-transition-hide {
transition: all 0.5s;
}
.slds-transition-show {
transition: all 0.5s;
animation: show 0.5s forwards;
}
#keyframes show {
0% {
transform: translateY(-50px);
}
25% {
transform: translateY(-40px);
}
50% {
transform: translateY(-20px);
}
75% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
.slds-notify {
pointer-events: all;
}
Demo:
The elements are removed 0.5s after the fade out transition.
Additional Info: I am using LWC OSS, which is developed on Node JS.
In order to achieve the same, I added another animation on closing, so basically whenI want to hide I am adding slds-transition-hide.
I have added another animation to the original fadeout of transition-hide of SLDS lib where I am dereasing the max-height so the other elements can slide up.
.slds-transition-hide {
transition: all 0.5s;
animation: hide 0.5s forwards;
}
.slds-transition-show {
transition: all 0.5s;
animation: show 0.5s forwards;
}
#keyframes hide {
0% {
max-height: 150px;
transform: translateY(0px);
}
25% {
transform: translateY(-10px);
}
50% {
transform: translateY(-20px);
}
75% {
transform: translateY(-40px);
}
100% {
max-height: 0px;
padding: 0px;
transform: translateY(-50px);
}
}
I have the following code:
#keyframes sonar-wave {
0% {
transform: scale(1.00);
opacity: 0;
}
50% {
transform: scale(1.15);
opacity: 0.5;
}
100% {
transform: scale(1.3);
opacity: 0;
}
}
When this triggers, I see a "pause" before the scale continues. I would like a smooth scaling animation. Fiddle here:
https://jsfiddle.net/Lztxfho9/
What am I doing wrong?
That's because you didn't specify a timing function, So the browser will default to ease
change it to
animation: sonar-wave 2s linear forwards;
I have an element
<a class="fa fa-user icon" href="#"></a>
My requirement is to have a pulsing effect whenever the mouse is on top of it.
My CSS is something like this.
.icon:hover{
-webkit-animation: pulse 2s ease-in;
-moz-animation: pulse 2s ease-in;
animation: pulse 2s ease-in;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#keyframes pulse {
0% {
-webkit-transform: scale(1);
opacity: 0.0;
}
25% {
-webkit-transform: scale(1.35);
opacity: 0.1;
}
50% {
-webkit-transform: scale(1.7);
opacity: 0.3;
}
75% {
-webkit-transform: scale(2.05);
opacity: 0.5;
}
100% {
-webkit-transform: scale(2.4);
opacity: 0.0;
}
}
The effect works fine but the thing is the original icon disappears. I want the original icon to remain visible while the pulsating effect is happening to make it stand out while the person is holding the mouse on top of it.
Do I need to overlay the original div with a new icon?
JSFiddle is available: https://jsfiddle.net/3bu8fxnp/9/
Updated Fiddle
You can add a second icon in the after pseudo element.
.fa-user:after {
content: "\f007";
display: block;
}
.fa-user:before {
position: absolute;
}
You need to change the selector with the transition as well to only affect one of the pseudo elements.
.icon:hover:before {
...
}
Is there a way to pulsate opacity from 0 to 1 (repeat) slowly with a CSS3 keyframes transformation, infinitely? Or does this require jQuery or Javascript with a transition opacity inside a class that is toggled on an interval?
I'm trying to work it into my orbit transformations (below). (I'm working on a live wallpaper background effect with multiple opaque images floating in a sidebar image on an installer application I'm building in Objective C.)
.orbit1
{
animation: myOrbit 200s linear infinite;
}
.orbit2
{
animation: myOrbit2 200s linear infinite;
}
#keyframes myOrbit1
{
from { transform: rotate(0deg) translateX(150px) rotate(0deg) }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg) }
}
#keyframes myOrbit2
{
from { transform: rotate(360deg) translateX(250px) rotate(-360deg) }
to { transform: rotate(0deg) translateX(250px) rotate(0deg) }
}
You can do it by adding multiple animations to the element, for example:
.orbit1
{
/* added for example reasons */
position :absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
background: red;
/* ---------- */
animation: myOrbit1 20s linear infinite, Pulsate 4s linear infinite;
}
#keyframes myOrbit1
{
from { transform: rotate(0deg) translateX(150px) rotate(0deg) }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg) }
}
#keyframes Pulsate {
from { opacity: 1; }
50% { opacity: 0; }
to { opacity: 1; }
}
<div class="orbit1"></div>
I'ved modified some of your parameters (like the speed of the animation and the opacity minimum) and added some spoof styling for the element for the purpose of the example.
Edit
I had originally thought that the multiple rotate() declarations were in error, but #vals informed me why it was there (to create a counter rotation on the object). I've updated the answer, and learned something new.
I would like to start the animation (the first time) from the current position.
the openAnimation goes from the point A to point B and the closeAnimation goes from the point B to the point A.
So, at page loading, the animation is suppose to be in the point B.
but when for the first time I change the class, the div starts from the point A.
#-webkit-keyframes openAnimation
0%
-webkit-transform: translateX(300px)
100%
-webkit-transform: translateX(0px)
#-webkit-keyframes closeAnimation
0%
-webkit-transform: translateX(0px)
100%
-webkit-transform: translateX(300px)
in the .open class
-webkit-transform-origin: 100% 50%
-webkit-animation: openAnimation 1s both ease-in
in the .close class
-webkit-transform-origin: 100% 50%
-webkit-animation: closeAnimation 1s both ease-in
what can I do for don't see the animation the first time?
You probably want transition, not animation. For example, see http://jsfiddle.net/g9dn1a09/
Basically you want following CSS:
.box {
transition: transform 1s;
}
.close {
transform: translateX(300px);
}
.open {
transform: translateX(0px);
}
Note that you want transition defined with a selector that is always applied. If you change property transition using .close or .open class selectors in the middle of the transition (animation) it will look bad.
I put this up on jsfiddle. Chrome/Safari only until you add more vendor prefixes or opt to go with a prefixfree.js or other option.
.open {
-webkit-transform-origin: 100% 50%;
-webkit-animation: openAnimation 1s both ease-in;
}
.close {
-webkit-transform-origin: 100% 50%;
-webkit-animation: closeAnimation 1s both ease-in;
}
#-webkit-keyframes openAnimation {
0% {
-webkit-transform: translateX(0px);
}
100% {
-webkit-transform: translateX(300px);
}
}
#-webkit-keyframes closeAnimation {
0% {
-webkit-transorm: translateX(300px);
}
100% {
-webkit-transform: translateX(0px);
}
}
http://jsfiddle.net/LtJLc/