I have a skew transform applied to a div and I'm wanting to animate it on page load.
When I use the a keyframe animation, the skew is removed during the animation and then "pops" into place once the animation is complete.
How can I keep the skew applied to the div while the animation is in progress?
div {
-webkit-transform:skew(-197deg);
-moz-transform:skew(-197deg);
transform:skew(-197deg);
width: 200px;
margin-left: 40px;
animation: 1s ease-in-out 0s 1 slideInFromLeft;
}
#keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
opacity: 0;
}
60% {
opacity: 0.5;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
<div>Hello, this is a skewed div that does not stay skewed when the animation is in progress.</div>
You need to add the skew to the animation or else the animation rule will overwrite it.
div {
-webkit-transform:skew(-197deg);
-moz-transform:skew(-197deg);
transform:skew(-197deg);
width: 200px;
margin-left: 40px;
animation: 1s ease-in-out 0s 1 slideInFromLeft;
}
#keyframes slideInFromLeft {
0% {
transform: skew(-197deg) translateX(-100%);
opacity: 0;
}
60% {
opacity: 0.5;
}
100% {
transform: skew(-197deg) translateX(0);
opacity: 1;
}
}
<div>Hello, this is a skewed div that does not stay skewed when the animation is in progress.</div>
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 am using WOW.js and animate.css, right now I am running my CSS to Infinite. I would like know how can I make my class run for 3 seconds stop and start again to infinite?
My html:
<img src="images/fork.png" class="fork wow rubberBand" >
My CSS class:
.fork {
position: absolute;
top: 38%;
left: 81%;
max-width: 110px;
-webkit-animation-iteration-count: infinite ;
-webkit-animation-delay: 5s;
}
The solution can be in JS or CSS3.
With pure CSS3 animations, one way to add a delay between every single iteration of the animation would be to modify the keyframes setting such that they produce the required delay.
In the below snippet, the following is what is being done:
The whole duration of the animation is 6 seconds. In order to have the delay, the whole duration should be the duration for which your animation actually runs + time delay. Here, the animation actually runs for 3s, we need a 3s delay and so the duration is set as 6 seconds.
For the first 50% of the animation (that is, 3 seconds), nothing happens and the element basically holds its position. This gives the appearance of the 3 second delay being applied
For the next 25% of the animation (that is, 1.5 seconds) the element moves down by 50px using transform: translateY(50px).
For the final 25% of the animation (that is, last 1.5 seconds) the element moves up by 50px using transform: translate(0px) (back to its original position).
The whole animation is repeated infinite number of times and each iteration will end up having a 3 second delay.
div{
height: 100px;
width: 100px;
border: 1px solid;
animation: move 6s infinite forwards;
}
#keyframes move{
0% { transform: translateY(0px);}
50% { transform: translateY(0px);}
75% { transform: translateY(50px);}
100% { transform: translateY(0px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>
The animation-delay property introduces a delay only for the first iteration and hence it cannot be used to add delays between every iteration. Below is a sample snippet illustrating this.
div{
height: 100px;
width: 100px;
border: 1px solid;
animation: move 6s infinite forwards;
animation-delay: 3s;
}
#keyframes move{
0% { transform: translateY(0px);}
50% { transform: translateY(50px);}
100% { transform: translateY(0px);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some content</div>
LIke this
html
<div class="halo halo-robford-animate"></div>
css
body{
background: black;
}
.halo{
width: 263px;
height: 77px;
background: url('http://i.imgur.com/3M05lmj.png');
}
.halo-robford-animate{
animation: leaves 0.3s ease-in-out 3s infinite alternate;
-webkit-animation: leaves 0.3s ease-in-out 3s infinite alternate;
-moz-animation: leaves 0.3s ease-in-out 3s infinite alternate;
-o-animation: leaves 0.3s ease-in-out 3s infinite alternate;
}
#-webkit-keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#-moz-keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#-o-keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#keyframes leaves {
0% {
opacity: 1;
}
50% {
opacity: 0.5
}
100% {
opacity: 1;
}
}
jsfiddle
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;
}
I need an element that initially has no animation, then animates to a different state on hover (one time, no loop) and after the hover is gone it should animate back to its original state.
Basically just like you would do it with a :hover style and a transition.
Is there a way to achieve that with a CSS3 animation?
This is my current usecase: http://jsfiddle.net/yjD73/11/
On hover an element fades from opacity: 0 to opacity: 1 and back.
This is what i think is not possible with transitions.
EDIT: As requested here the exact code from jsfiddle
a div with four images
<div class="zoombox">
<img src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=4¢er=51.561998,-1.605100">
<img src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=7¢er=51.561998,-1.605100">
<img src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=12¢er=51.561998,-1.605100">
<img src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=16¢er=51.562606,-1.605100">
</div>
images stacked onto each other and simple css animations on hover
.zoombox {
position: relative;
margin: 50px;
float: left;
}
/* initial state */
.zoombox img:not(:first-child) {
position: absolute;
top: 0;
opacity: 0;
}
/* On hover in */
.zoombox:hover img:nth-child(1) {
-webkit-animation: first-in 400ms 0ms 1 normal ease-in both;
}
.zoombox:hover img:nth-child(2) {
-webkit-animation: middle-in 1600ms 0ms 1 linear both;
}
.zoombox:hover img:nth-child(3) {
-webkit-animation: middle-in 1600ms 1200ms 1 linear both;
}
.zoombox:hover img:nth-child(4) {
-webkit-animation: last-in 400ms 2400ms 1 linear both;
}
#-webkit-keyframes first-in {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(1.5);
opacity: 0;
}
}
#-webkit-keyframes middle-in {
0% {
-webkit-transform: scale(0.5);
opacity: 0;
}
25%, 75% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(1.5);
opacity: 0;
}
}
#-webkit-keyframes last-in {
0% {
-webkit-transform: scale(0.5);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
Conic, I have created a JSFiddle that replicates most of what you want with css3 animations.
Here it is.
The code that makes this all possible in CSS is:
#-webkit-keyframes changeImage {
0% {background: url("http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=4¢er=51.561998,-1.605100");}
33% {background: url("http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=7¢er=51.561998,-1.605100");}
67% {background: url("http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=12¢er=51.561998,-1.605100");}
100% {background: url("http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=300x300&maptype=hybrid&zoom=16¢er=51.562606,-1.605100");}
}
Right now the jsfiddle is having the image run through the animation on hover and return to the original image. Let me know if you need any over things to happen and by the way, this won't work on any touch devices as a result of a lack of hover state possibilities.