I have made an animation in which the image floats.
But the image seems to be vibrating when reaching the end.
Here is the website where the image is link
This is the CSS if the div wrapping the img
.newImg {
position: relative;
width: 472px;
height: 414px;
animation-name: updown;
animation-duration: 5s;
/* animation-delay: 1.5s; */
animation-iteration-count: infinite;
transition-timing-function: ease-in-out;
}
#keyframes updown {
0% {
top: 0px;
}
25% {
top: 8px;
}
50% {
top: 0px;
}
75% {
top: 8px;
}
100% {
top: 0px;
;
}
}
The vibration you see because of the top property. Try using translateY() instead. It will perform faster, animate smoother, and won't affect the layout.
#keyframes updown {
0% {
transform: translateY(0);
}
25% {
transform: translateY(8px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(8px);
}
100% {
transform: translateY(0);
}
}
Related
I'm using the keyframes to create an infinite scale up and scale down of a div on mouseover.
As you can see from the link below the parent box increase its sizes and then the child div start to scale up and down.
I would like that on mouse out, before the parent div will scale down, the child div return to its regular sizes in a smooth way.
Now, as you can see, it return to the original sizes suddenly, without any smoothness.
My keyframes:
#keyframes imageZoom {
0% { transform: scale(1); }
50% { transform: scale(1.24); }
100% { transform: scale(1);}
}
#-moz-keyframes imageZoom {
0% { -moz-transform: scale(1);}
50% { -moz-transform: scale(1.24); }
100% { -moz-transform: scale(1); }
}
#-webkit-keyframes imageZoom {
0% { -webkit-transform: scale(1); }
50% {-webkit-transform: scale(1.24); }
100% { -webkit-transform: scale(1); }
}
#-ms-keyframes imageZoom {
0% { -ms-transform: scale(1); }
50% { -ms-transform: scale(1.24); }
100% { -ms-transform: scale(1); }
}
The child div styles:
#myFeaturedItems:hover article {
animation: imageZoom linear 50s;
animation-iteration-count: infinite;
-webkit-animation: imageZoom linear 50s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#myFeaturedItems article {
background-image: url('https://images.unsplash.com/photo-1447688812233-3dbfff862778?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=01b98cd0603404826ec5df6d9ef46dfc');
background-position: center center;
background-size: cover;
display: block;
height: 100%;
width: 100%;
}
My demo link: http://emanuelezenoni.com/dev/test/
Thanks a lot!
You don't need an animation to achieve what you want. A transition when you hover over the article is suitable. See my very basic example of the transition here below.
What it does:
transition: transform 1s ease-in-out;
This will put a transition on the property transform for 1s with easing ease-in-out. When you hover over .box, the transform: scale(1.25); will run, because we said that a transition was applied on it. The overflow: hidden; makes sure that the content will not be bigger than the box it's in.
You can tweak with the settings to your needs.
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
}
.box {
margin-left: 50%;
width: 50%;
min-height: 100%;
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
background-position: center center;
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
.box:hover {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
<div class="container">
<article class="box">
</article>
</div>
In the linked fiddle, an element has two animations.
https://jsfiddle.net/ccqpLa6L/1/
Below is a capture of the CSS:
#-webkit-keyframes slideInLeft { 0% { transform: translateX(-200px); } 100% { transform: translateX(0); } }
#-webkit-keyframes slideOutLeft { 0% { transform: translateX(0); } 100% { transform: translateX(100px); }}
.element {
width: 250px;
height: 75px;
background-color: dimgrey;
right: 0;
margin-bottom: 10px;
border-radius: 5px;
-webkit-animation: slideInLeft 1s forwards, slideOutLeft 2s forwards;
-webkit-animation-delay: 0s, 1s;
}
The first animation executes without an issue, but the second animation jumps to the end of its animation without any interstitial frames.
Why?
While I'm not exactly sure why the animation wasn't running properly, I was able to achieve the desired effect using spaced out percentages in one keyframe:
https://jsfiddle.net/ccqpLa6L/5/
#-webkit-keyframes slideInLeft {
0% {
transform: translateX(-200px);
}
25% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
100% {
-webkit-transform: translateX(100px);
}
}
.element {
width: 250px;
height: 75px;
background-color: dimgrey;
margin-bottom: 10px;
border-radius: 5px;
-webkit-animation: slideInLeft 4s forwards;
}
So I'm looking to create a really basic snow effect.
I have a keyframe animation for the flake swaying side to side and moving down the Y axis. I want the element to retain the ending values using forwards. But I also want to then loop the animation (infinite), so that it continues where it left off.
HTML:
<div>
<figure class="small"></figure>
</div>
CSS:
div {
width: 100%;
height: 250px;
background: #184254;
}
figure {
border-radius: 50%;
}
#-webkit-keyframes snowfall {
25% {
transform: translateX(10px) translateY(20px);
}
75% {
transform: translateX(-10px) translateY(30px);
}
100% {
transform: translateX(0px) translateY(40px);
}
}
.small {
margin-left: 100px;
width: 7px;
height: 7px;
background: #DFE9ED;
-webkit-animation: snowfall 2s ease-in-out forwards infinite;
}
http://codepen.io/mildrenben/pen/PwZdXB
You can use two animations, one to move right-left and other to make it fall.
The up to down animation will work with absolute positioning, so it will depend on body height (or its first parent with absolute or relative positioning).
figure {
border-radius: 50%;
position: absolute;
}
#-webkit-keyframes snowside {
25% {
transform: translateX(10px);
}
75% {
transform: translateX(-10px);
}
100% {
transform: translateX(0px);
}
}
#-webkit-keyframes snowfall {
0% {
top: 0;
}
100% {
top: 100%;
}
}
.small {
margin-left: 100px;
width: 7px;
height: 7px;
background: #DFE9ED;
-webkit-animation: snowside 2s ease-in-out forwards infinite, snowfall 15s ease-in-out forwards infinite;
}
http://codepen.io/anon/pen/YPwOMY
I would like to build a animated spinner with CSS3.
It should behave like this :
After the last state it should start again like in the first state.
I managed to create circles using the technique explained here : stackoverflow question
Now, how can I animate the spinner between the described states? I do not know how to animate the clip-rect property. I also guess that it would behave better with a clip-poly instead (a triangle maybe) but I can't animate that either.
CSS3 spinner
This CSS preloader uses keyframe animations and transform-rotate CSS3 properties to make the circle and the filling color.
This spinner is responsive.
.sp1 {
margin: 50px auto;
position: relative;
width: 30%;
padding-bottom: 30%;
overflow: hidden;
background-color: #557733;
border-radius: 50%;
z-index: 1;
}
.sp:before,
.sp:after {
content: '';
position: absolute;
height: 100%;
width: 50%;
background-color: #99FF33;
}
.sp1:after {
width: 80%;
height: 80%;
margin: 10%;
border-radius: 50%;
background-color: #fff;
z-index: 6;
}
.sp1:before {
background-color: inherit;
z-index: 5;
}
.sp2:before {
z-index: 4;
-webkit-animation: spin1 3s linear infinite;
animation: spin1 3s linear infinite;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.sp2:after {
opacity: 0;
right: 0;
z-index: 6;
-webkit-animation: spin2 3s linear infinite;
animation: spin2 3s linear infinite;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
#-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg); }
50%, 100% { -webkit-transform: rotate(180deg); }
}
#keyframes spin1 {
0% { transform: rotate(0deg); }
50%, 100% { transform: rotate(180deg); }
}
#-webkit-keyframes spin2 {
0% { -webkit-transform: rotate(0deg); opacity: 0; }
49.99% { opacity: 0; }
50% { -webkit-transform: rotate(0deg); opacity: 1; }
100% { -webkit-transform: rotate(180deg); opacity: 1;
}
}
#keyframes spin2 {
0% { transform: rotate(0deg); opacity: 0; }
49.99% { opacity: 0; }
50% { transform: rotate(0deg); opacity: 1; }
100% { transform: rotate(180deg); opacity: 1; }
}
<div class="sp sp1">
<div class="sp sp2"></div>
</div>
Fiddle demo
I'm using a translate animation, but it doesn't work in Safari or Chrome. What am I doing wrong?
Here's my code, and a JSFiddle of it in action:
HTML
<div id="animate"></div>
CSS
#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 10%;
background: gray;
-webkit-animation:move 6s ease infinite;
-moz-animation:move 6s ease infinite;
animation: move 6s ease infinite;
}
#keyframes move {
50% {
transform: translate(800px, 0px);
}
}
#-webkit-keyframes move {
50% {
transform: translate(800px, 0px);
}
}
#-moz-keyframes move {
50% {
transform: translate(800px, 0px);
}
}
Webkit still needs the -webkit prefix for transform:
#-webkit-keyframes move {
50% {
-webkit-transform: translate(800px, 0px);
}
}
Demo: http://jsfiddle.net/MLhYS/3/