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);
}
}
Related
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.
I am trying to make an Oscillatory animation using css as shown below:
Here's how I have created my animation:
#keyframes rotateFeather {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-180deg);
}
50% {
transform: rotate(-90deg);
}
75% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
Here is my class: (Using sccs)
.logo {
height: 5rem;
transition: all 0.3s ease;
&box {
position: absolute;
top: 4rem;
left: 4rem;
}
&:hover {
animation-name: rotateFeather;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
}
Here I am facing this problem: When it reaches 180deg at 100% it abruptly resets to 0 which I want to make smooth.
How is it possible to do the same?
To ensure smooth transition, We need to make sure that transformation at 0 and 100% must match with the original state:
#keyframes rotateFeather {
0% {
transform: rotate(0deg); //-30
transform-origin: bottom;
}
20% {
transform: rotate(-30deg); //-60
transform-origin: bottom;
}
40% {
transform: rotate(0deg); //-30
transform-origin: bottom;
}
60% {
transform: rotate(30deg); // 0
transform-origin: bottom;
}
80% {
transform: rotate(60deg); //30
transform-origin: bottom;
}
100% {
transform: rotate(0deg); //30
transform-origin: bottom;
}
}
This helped me to solve my issue. I am not sure, if I need to add transform-origin in every stage, if someone can elaborate better on that, that would be helpful.
Here's a simplified version of your latest animation code (with a Codepen to see it in action):
#keyframes rotateFeather {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(-30deg);
}
80% {
transform: rotate(60deg);
}
100% {
transform: rotate(0deg);
}
}
.logo {
transform-origin: bottom;
&:hover {
animation: rotateFeather 1s linear infinite;
}
}
Some points about the above tweaks:
You don't need transform-origin at every keyframe. You can set it globally.
You can roll all of your animation properties into a single shorthand rule.
You can skip keyframes that are mathematically interpolating where the animation would be going anyway (notice I omitted 40% and 60% above and it looks the same).
You don't need any transition rules on elements that you are animating with keyframes. Unless you're using it for something else, but you want to be careful to avoid attempting to animate the same property on the same element with both animation and transition simultaneously, as it will break the animation in question.
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.
Please tell me how to make a "smooth" animations.
I have the keyframes, which describes the behavior of the animation in the download. And at Hover, connects the other keyframes (animation and changes its course).
Between them the change occurs sharpness.
Here is an example of field http://jsfiddle.net/g4wvqrL8/
.icon-1 {
width: 3em;
height: 3em;
margin: 85px auto;
animation: pull 3s infinite reverse ease-in-out
}
.icons {
width:80%;
margin: 0 auto;
height:90px;
}
.icons:hover {
animation: rotate360 4s infinite reverse cubic-bezier(0.4, 0, 1, 1);
}
#keyframes pull {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-55px);
}
100%{
transform: translateY(0px);
}
}
#keyframes rotate360 {
0% {
transform: rotate(0deg) translateX(30px);
}
100% {
transform: rotate(360deg) translateX(30px);
}
}
Question: how at different keyframes at Hover to make the smooth transition of 2 types of animation?
I tried to make transition (shifts them to the desired trajectory at Hover and start a new animation, but smooth still was not).
Or how to start the animation with a place to stay until this animation ??
Prompt, all thanks in advance!
I have an elements that has infinite css3 animation that is changed to another infinite animation when element is hovered. Everything is ok, but sometimes animation changing is too bouncy, is there a way to make transition between animations smooth (maybe bringing element to the initial state between animations) on mouseenter and mouseleave? The starting and ending states of both animations are the same.
#keyframes first-animation {
0% { transform: scale3d(1,1,0);}
50% { transform: scale3d(0.8,0.8,0); }
100% { transform: scale3d(1,1,0); }
};
#keyframes second-animation {
0% { transform: scale3d(1,1,0); }
70% { transform: scale3d(0.7,0.7,0); }
80% { transform: scale3d(0.9,0.9,0); }
100% { transform: scale3d(1,1,0); }
};
div{
animation: first-animation 1.7s ease-in-out infinite;
}
div:hover, div:focus{
animation: second-animation 1.1s ease-in-out infinite;
}
I don't think that it can be achieved using the scale transforms.
You can do a trick and change from scale() to translateZ(). When a perspective is applied, the net effect will be also a scale. But the interesting point is than setting perspective to a high value, this scale effect can be made very small. And perspective is an animatable property.
The downside is that we will need to add 2 wrap around layers... but the final result is this. I have kept the original version to compare
#keyframes first-animation {
0% { transform: scale(1,1);}
50% { transform: scale(0.8,0.8); }
100% { transform: scale(1,1); }
}
#keyframes second-animation {
0% { transform: scale(1,1); }
70% { transform: scale(0.7,0.7); }
80% { transform: scale(0.9,0.9); }
100% { transform: scale(1,1); }
}
.sample {
background-color: lightblue;
animation: first-animation 1.7s ease-in-out infinite;
}
.sample:hover {
animation: second-animation 1.1s ease-in-out infinite;
}
.dim {
width: 200px;
height: 200px;
}
.base1 {
perspective: 1000px;
transition: perspective 2s ease-out;
position: absolute;
left: 300px;
top: 10px;
}
.base1:hover {
perspective: 9999px;
}
.base2 {
width: 100%;
height: 100%;
animation: animation1 1.7s ease-in-out infinite;
perspective: 9999px;
transition: perspective 2s ease-in;
}
.base1:hover .base2 {
perspective: 1000px;
}
.inner {
width: 100%;
height: 100%;
background-color: lightgreen;
animation: animation2 1.1s ease-in-out infinite;
transform-style: preserve-3d;
perspective: 99999px;
}
#keyframes animation1 {
0% { transform: translateZ(0px);}
50% { transform: translateZ(-200px); }
100% { transform: translateZ(0px); }
}
#keyframes animation2 {
0% { transform: translateZ(0px);}
70% { transform: translateZ(-300px); }
80% { transform: translateZ(-100px); }
100% { transform: translateZ(0px); }
}
<div class="sample dim">SAMPLE</div>
<div class="base1 dim">
<div class="base2">
<div class="inner">DEMO</div>
</div>
</div>
In order to get the desired effect then you will need to use the css3 animation events. in this case you need to use "AnimationIteration". So you can fire an event after an iteration. I have added a class to the end of this event for the second animation.
Codepen Demo
$(document).ready(function() {
var animationElement = $(".animation");
$("body").on({
mouseover: function() {
animationElement.one('webkitAnimationIteration mozAnimationIteration AnimationIteration', function() {
animationElement.addClass("second-animation");
});
},
mouseleave: function() {
animationElement.one('webkitAnimationIteration mozAnimationIteration AnimationIteration', function() {
animationElement.removeClass("second-animation");
});
}
});
});
Have you used the transition?? If not, please add the transition rules in the parent div.
div{
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-ms-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
}