I wanna make a drop animation when the page loads similar to a working example I've seen at someone else but mine doesn't. The image doesn't drop at all, does not transition from 0 opacity to 1 opacity. It just suddenly appears after the given duration. Help me, please.
.cover img{
height: 60vh;
filter: drop-shadow(1px 5px 3px black);
position: relative;
left: 60px;
animation: drop 1.5s ease;
}
#keyframes drop{
0% {
opacity: 0%;
transform: translateY(-80px);
}
100% {
opacity: 1%;
transform: translateY(0px);
}
}
What I think you've done wrong is used a percentage in the opacity. You just need the number.
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
Does this help?
Related
I am trying to animate a line that expands both ways from the centre using transform:scale but for some reason the line kind of "rewinds" slightly when it reaches the end, but only on the right side of the line. This only seems to happen on firefox, (both on mobile and desktop) but seems fine on chrome.
<div class="line"></div>
<style>
.line {
height: 4px;
width: 5px;
background-color: #5d496a;
margin: 0 50%;
animation: line_animation 1s forwards ;
}
#keyframes line_animation {
0% {
transform: scale(1,1);
}
100%{
transform: scale(22,1);
}
}
</style>
I am still learning animations so I am not sure what I am doing wrong. Any help would be very appreciated.
https://www.w3schools.com/code/tryit.asp?filename=GRA6EYT2GLSX
Looks like it was an issue with scale being greater than 1.
Fixed by changing width: 5px; to width: 15%; and changed
#keyframes line_animation {
0% {
transform: scale(1,1);
}
100%{
transform: scale(22,1);
}
}
to
#keyframes line_animation {
from {
transform: scale(0.01,1);
}
to{
transform: scale(1,1);
}
}
Animation i've created works fine on Chrome and Firefox, but is pixelated on Safari (version 10.1.1) and IE11.
Tried using translateZ() / translate3d() so the gpu can render the animations but nothing happened.
I've avoided using top, left props. Had an idea of using the will-change prop but it doesn't take animation as a value.
Removing the border radius would fix the rendering issue.
Can someone explain the cause of this and is there a solution to fix this issue?
https://codepen.io/imrdev/pen/awBZOW
html ->
<div class="dot"></div>
css - >
/* KEYFRAME ANIMATION */
#keyframes ease {
0% {
transform: scale(0) rotate(0);
}
50% {
transform: scale(4)
rotate(.01deg);
}
100% {
transform: scale(0) rotate(0);
}
}
#keyframes ease2 {
0% {
transform: scale(0) rotate(0);
}
50% {
transform: scale(6)
rotate(.01deg);
}
100% {
transform: scale(0) rotate(0);
}
}
.dot {
$scale-duration: 15s;
background-color: black;
position: relative;
width: 7px;
height: 7px;
border-radius: 50%;
&::before,
&::after {
content: "";
background: red;
width: 7px;
height: 7px;
border-radius: inherit;
opacity:.3;
position: absolute;
transform: translate(0px, 0px);
}
&::before {
animation: ease 5s ease-in-out infinite;
}
&::after {
animation: ease2 5s ease-in-out infinite both $scale-duration/15;
}
}
Thanks :-)
I have not enough reputation so i can't comment yet, so sorry if this doesn't qualify as a proper answer, but have you tried changing the size to something bigger than 7px and use eg scale(1) instead of scale(4)?
if you need to scale the width and height up by 4 or 6, why not just double the original size and scale up by 2 ?
I wouldn't be surprise if safari doesn't really scale the size up, but kinda like "zooms in" and since the original size is just 7 x 7 px it gets pixelated when "zoomed in"
and regarding to the will-change: you wouldn't use "animation" but "transform"
I've made a pie timer animation using only HTML/CSS. You can see it here:
https://jsfiddle.net/yisusans/why2wy5q/
.timer-container {
background: -webkit-linear-gradient(left, #677291 50%, #D8DAE5 50%);
border-radius: 100%;
height: 30px;
position: relative;
top: 5px;
left: 9px;
width: 30px;
-webkit-animation: time 20s linear 1;
animation: time 20s linear 1;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-moz-transform: translateZ(1) scale(1.0, 1.0);
-ms-transform: translateZ(1) scale(1.0, 1.0);
-o-transform: translateZ(1) scale(1.0, 1.0);
-webkit-transform: translateZ(1) scale(1.0, 1.0);
transform: translateZ(1) scale(1.0, 1.0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.timer {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 50%;
-webkit-animation: mask 20s linear 1;
-webkit-transform-origin: 100% 50%;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 1s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#-webkit-keyframes time {
100% {
-webkit-transform: rotate(360deg);
}
}
#-webkit-keyframes mask {
0% {
background: #D8DAE5;
-webkit-transform: rotate(0deg);
}
50% {
background: #D8DAE5;
-webkit-transform: rotate(-180deg);
}
50.01% {
background: #677291;
-webkit-transform: rotate(0deg);
}
100% {
background: #677291;
-webkit-transform: rotate(-180deg);
}
}
#keyframes time {
100% {
transform: rotate(360deg);
}
}
#keyframes mask {
0% {
background: #D8DAE5;
transform: rotate(0deg);
}
50% {
background: #D8DAE5;
transform: rotate(-180deg);
}
50.01% {
background: #677291;
transform: rotate(0deg);
}
100% {
background: #677291;
transform: rotate(-180deg);
}
}
<div class='timer-container'>
<div class='timer'></div>
</div>
It works but it's a bit shaky. Any tips to smooth out the animation would be amazing.
Thanks!
It's running very smoothly on my MacBook Pro in Safari, Chrome and Firefox, but CSS animations are subject to performance differences between devices and browsers. You might just be seeing the limitations of your device.
It's also likely to run more smoothly outside of jsfiddle.
I came across this post:
Improving CSS3 transition performance
It's been pretty informative in relation to animation performance. But I'd love to see if anyone else has any other insights.
firstly,
good job...
secondly,
It seems I am 4 years late for this answer. but, here goes...
Like #dave suggested in the above post... I also failed to recreate the shakiness issue you have with the animation. (even increasing the height and width property of the .timer-container selector and taking a closer look) It's running pretty smooth. And there seems to be nothing wrong with the code snippet you have provided.
But I will leave this answer for people who want a quick fix for common CSS animation shakiness that they might experience.
set
backface-visibility: hidden;
on the element, you are animating.
and only change opacity and transform property when animating.
Browsers are optimized for animating these properties and will ensure that you minimize any performance overhead.
Pretty much any animation you want can be achieved using transforms.
I have a CSS3 Animation for an indeterminate progress bar. In the animation I have a gradient oscillating back and forth along the progress bar. I would like to flip the image of gradient horizonally as it travels back to the left side of the progress bar. Basically the gradient always fades out the opposite direction the image is moving. Unfortunately I can't figure out a way for the image to flip horizontally BEFORE it starts moving back towards the left and am getting some odd transformations of the image as it flips.
I have created a JSFiddle to show how it looks right now.
http://jsfiddle.net/MtWzL/
Here is the CSS I'm currently using for the animation:
#-webkit-keyframes loader {
0% {
-webkit-transform: scaleX(1);
-webkit-transform: translateX(-100px);
-webkit-transform-origin:left;
}
50% {
-webkit-transform: translateX(300px);
}
100% {
-webkit-transform: translateX(-100px);
-webkit-transform: scaleX(-1);
}
}
#keyframes loader {
0% {
transform: scaleX(1);
transform: translateX(-100px);
transform-origin:left;
}
50% {
transform: translateX(300px);
}
100% {
transform: translateX(-100px);
transform: scaleX(-1);
}
}
.slider
{
animation: loader 2.5s infinite linear;
-webkit-animation: loader 2.5s infinite linear; /* Safari and Chrome */
background: url('http://s23.postimg.org/mglkwgxuv/indeterminate_bg.png') no-repeat;
border-radius: 10px;
height: 10px;
position: relative;
width: 100px;
z-index: 999;
opacity: .6;
}
.container {
background: -webkit-linear-gradient(#00c3ff,#0071bc);
background: linear-gradient(#00c3ff,#0071bc);
border-radius: 3px;
height: 10px;
overflow: hidden;
width: 300px;
}
.background {
background: rgba(0,0,0,0.7);
border-radius: 3px;
display: inline-block;
padding: 10px;
}
There are 2 issues that need to be fixed
first of all, this
-webkit-transform: scaleX(1);
-webkit-transform: translateX(-100px);
won't work as you expect; the second property over-rides the first one, as you can not set 2 different values for a property in separate lines.
the correct syntax would be
-webkit-transform: translateX(-100px) scaleX(1);
And second, if you want a sudden change in some value, you need to set it from a keyframe to another keyframe close enough to the first one.
So, the solution would be
#-webkit-keyframes loader {
0% { -webkit-transform: translateX(-100px) scaleX(1); }
50% { -webkit-transform: translateX(300px) scaleX(1); }
51% { -webkit-transform: translateX(300px) scaleX(-1); }
100% { -webkit-transform: translateX(-100px) scaleX(-1); }
}
corrected fiddle
I have corrected only the webkit transforms, but the same concept applies to the rest.
I was watching for your problem since you put it here, but I guess its some kind of bug we won't solve or maybe I just dont understand why it is working like that.
Since I had no clue how to solve it I manage to do example for you with alternative solution
EXAMPLE
As you can see I modified your jsfiddle, simple words, created another slide loader .sliderBack that goes backwards. Hope it will helps you somehow. Peace :)
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.