I am animating a line from 0 to 100%.
Keyframe CSS:
#keyframes animate-line {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Line CSS:
.line {
animation: animate-line 5s infinite;
background: none repeat scroll 0px 0px transparent;
border-top: 2px solid rgba(255, 255, 255, 0.5);
display: block;
position: absolute;
z-index: 9;
height: 1px;
-moz-transform: rotate(16deg);
-webkit-transform: rotate(16deg);
transform: rotate(16deg);
left: 20px;
top: 200px;
}
I am using vendor prefixes everywhere in live code, omitted here for readability.
You can see I rotate the line with transform: rotate(); doing that makes the line veer up going from 0 to 100%. I can think logically why it is doing that, I define the left/top properties so I would think it starts at top: 200px and left: 20px and expand as expected but why it still wants to veer up ?
Running demo on jsfiddle
Hopefully someone can point this out, I'm sure its simple.
ANSWER: Just learned about a new property transform-origin: 0 0 thanks to #barrett. It can be useful to animate a rotated line, and if anyone else is doing that using transform-origin: 0; is a huge piece, thanks.
Add this to your stylesheet on .line:
.line {
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
By default it will transform from the center which is why it moves up.
Running demo
Related
Trying to smoothly animate a div's background image #bg2 over a short pixel distance (while a clip path animates over it). I'm not able to get the image to move smoothly, it jitters and judders. The clip path animation is fine.
I've tried different easing (linear / ease-in-out etc) suggested in another SO thread, and also extending the distance it needs to move, but it still seems to jump pixel by pixel (sort of), rather than move smoothly. (Although, extending the move distance isn't an option in the actual use case).
How can smooth movement of the cat background image #bg2 be accomplished? Thanks.
** Edit: It's totally smooth for me in Firefox, for me it's jittery in Chrome 91.0.4472.114 on Mojave 10.14.6, and less jittery in Safari. For other it seems to be smooth on Chrome also. Hmmm...
var clickTag = "#";
#main-container {
position: absolute;
width: 970px;
height: 250px;
left:-200px;
box-sizing: border-box;
background: #333;
overflow:hidden; perspective: 800px;
border:1px solid #ccc;
}
div, img {
position: absolute;
background-repeat:no-repeat;
width: 970px;
height: 250px;
z-index: 4;
background-size: 970px 250px;
}
#bg2{
width: 970px;
height: 250px;
z-index:2;
background-image:url('https://i.stack.imgur.com/6EcDu.jpg');
-webkit-clip-path: circle(9% at 682px 110px);
clip-path: circle(9% at 682px 110px);
transform: translateY(20px);
background-position: -5px -10px;
}
#bg2{animation: grow 2.5s 2.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;-webkit-animation: groww 2.5s 2.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;}
#-webkit-keyframes groww {
0% {opacity:1;transform: translateY(20px);clip-path: circle(9% at 682px 110px);-webkit-clip-path: circle(9% at 682px 110px);background-position: -5px -10px;}
100% {opacity:1;transform: translateY(-4px);clip-path: circle(15% at 682px 128px);-webkit-clip-path: circle(15% at 682px 128px);background-position: 0px 0px;}
}
#keyframes grow {
0% {opacity:1;transform: translateY(20px);clip-path: circle(9% at 682px 110px);background-position: -5px -10px;}
100% {opacity:1;transform: translateY(-4px);clip-path: circle(15% at 682px 128px);background-position: 0px 0px;}
}
<a href="javascript:window.open(window.clickTag)">
<div id="main-container" class="animate">
<div id="bg2"></div>
</div>
</a>
I'm a bit curious about why having a large banner while not displaying it all.
Anyways, I provide another way of animating, basically just changing the height. Hopefully that could give some ideas.
I removed the width to make it slightly more responsive.
The animation somewhat jittery in this solution, but I guess that it depends on your bezier curve. So perhaps that's the issue all along?
var clickTag = "#";
#main-container {
position: relative;
height: 250px;
box-sizing: border-box;
border: 1px solid #ccc;
background-color: #333;
}
#bg2 {
position: absolute;
left: 75%;
top: 50%;
transform: translate(-50%, -50%);
height: 40%;
aspect-ratio: 1;
border-radius: 50%;
background-image: url('https://i.stack.imgur.com/6EcDu.jpg');
background-position: right 25% center;
animation: grow 2.5s 2.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}
#keyframes grow {
to { height: 80%; }
}
<a href="javascript:window.open(window.clickTag)">
<div id="main-container">
<div id="bg2"></div>
</div>
</a>
I have animation with using transform:translate(-100%) and transition, but when i load page my block is moving from 0% to -100%;
in normal condition she have to have transform:translate(-100%) and when checkbox is checked - transform:translate(0%)
It works well but on load is moving from o to -100%
https://katehrybkova.github.io/ETmenu/index.html - link on github-page
https://github.com/katehrybkova/ETmenu - source
.menuBlock {
background-color: #35393b;
height: 100vh;
color: white;
padding: 25px 0;
width: 400px;
position: absolute;
transform: translateX(-100%);
transition: 1s;
}
#idishka:checked~.menuBlock {
transform: translateX(0);
}
The animation starts with .menuBlock at left: 0, that's why transform: translateX(-100%) starts fading it to the left.
Maybe you can replace translateX function with left, because you have .menuBlock with fixed width.
This is the final code:
.menuBlock {
background-color: #35393b;
height: 100vh;
color: white;
padding: 25px 0;
width: 400px;
transition: 1s;
position: absolute;
left: -400px;
}
#idishka:checked ~ .menuBlock {
left: 0;
}
I don't recommend you using fixed widths (in pixels), for responsivity issues ;)
I've created a line, which appears from 0 to full length on mouse hover. In this code, the line moves from left to right. I just want to make it move from (0,0) to any given angle. Is there any way I can achieve this?
.cspaceintro .intro-container .line2 {
position: relative;
left: 890px;
bottom: 25px;
width: 2%;
height: 30px;
background-color: #3ebbff;
background: -webkit-gradient(linear, 0 0, 0 100%，from(#7BC3FF), to(#7BC3FF));
-webkit-animation: aaa 2s linear 1;
-webkit-animation-fill-mode: both;
}
#keyframes aaa {
0% {
width: 0%;
}
30% {
width: 2%;
}
60% {
width: 4%;
}
100% {
width: 5%;
}
}
<div class="cspaceintro">
<div class="intro-container">
<div id="li2"></div>
</div>
</div>
You can use CSS3 properties transform and transform-origin.
.cspaceintro {
/* rotate to the respective degrees */
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
/* sets the origin point for the transformed element */
-webkit-transform-origin: 0;
transform-origin: 0;
}
Please refer the link: https://developer.mozilla.org/en/docs/Web/CSS/transform?v=example#Live_example
I have the following fiddle (Wekbit/Chrome only).
Just watch the animation for a while and you will see it "stop" for a millisecond and then continues again. Could it be the svg file itself? If that is the case, how can I fix this file so the hiccup is gone?
HTML
<div class="tile10"></div>
CSS
#-webkit-keyframes move {
0% {
background-position: 6px 0;
}
100% {
background-position: 6px 80px;
}
}
.tile10 {
width: 80px;
height: 80px;
position: absolute;
background: url(http://www.mauricederegt.nl/loopband.svg);
background-repeat: repeat-y;
-webkit-animation: move 3s linear infinite;
z-index: -1;
}
It was indeed in the image. Your rows are about 6px heigh. 80 is not dividable by 6, so there will be a little displacement. 78 however is dividable by 6.
http://jsfiddle.net/rtS5U/5/
So instead of moving it 80px down, move it 78px down.
#-webkit-keyframes move {
0% {
background-position: 6px 0;
}
100% {
background-position: 6px 78px;
}
}
I've created a basic 3D cube using CSS and <div>s. However, when it animates, the sides are not "overlapping" properly. It's a bit hard to explain, so see the http://jsfiddle.net/JNCNr/ to see precisely what I mean. I've read through some SO posts, the MDN, and so forth, but I am not quite sure what is causing my issue. I simply want the sides to behave properly when they rotate behind each other.
EDIT: Right now it's working for Chrome only.
Here is some of my CSS:
.container {
position: absolute;
left: 50%;
top: 50%;
height: 100px;
width: 100px;
/* for 3d animations */
-webkit-perspective: 800;
}
.box {
/* size */
height: 100px;
width: 100px;
position: absolute;
-webkit-user-select: none;
cursor: move;
/* color */
opacity: 1;
background: -webkit-radial-gradient(#666, #333);
border: 1px solid black;
/* 3d stuff */
-webkit-transform-origin: 50px 50px -50px;
}
.s1 {
-webkit-animation: as1 4s linear infinite;
}
#-webkit-keyframes as1 {
from {
-webkit-transform: rotate3d(0, -1, 0, -270deg);
}
to {
-webkit-transform: rotate3d(0, -1, 0, 90deg);
}
}
Thanks~!
Apply backface-visibility: hidden to hide the parts of element that have been rotated to show the backface:
.s1, .s2, .s3, .s4 {
-webkit-backface-visibility: hidden;
}
Updated jsFiddle