英文:
How to animate diagonal lines growing without rotation in CSS?
问题
我正在制作一段动画，我希望对角线从它们的初始高度0%增长到100%，而不进行任何旋转。目前，我有以下CSS代码：
HTML
<div class="stripes-1">
<span class="rec-1"></span>
<span class="rec-1"></span>
<span class="rec-1"></span>
<span class="rec-1"></span>
</div>
CSS
.who-we-are {
height: 100vh;
margin: auto;
padding: auto;
}
.stripes-1 {
display: flex;
flex-direction: column;
}
.rec-1 {
transform: scaleX(100%) rotate(40deg);
animation: expandHeight 1s ease-in-out forwards;
width: 72.5%;
margin: 1rem 0;
animation: appearUp 1.5s linear;
transition: ease-in;
position: relative;
left: 500px;
top: 350px;
}
@keyframes appearUp {
0% {
transform: scaleX(0) rotate(0deg);
}
100% {
transform: scaleX(100%) rotate(40deg);
}
}
.rec-1:nth-of-type(1) {
border-bottom: 30px solid #1DCDFE;
}
.rec-1:nth-of-type(2) {
border-bottom: 30px solid #11FFC4;
}
.rec-1:nth-of-type(3) {
border-bottom: 30px solid #21D0B2;
}
.rec-1:nth-of-type(4) {
border-bottom: 30px solid #2F455C;
}
问题是在动画过程中，线条不仅增长而且旋转。然而，我希望它们保持初始的40度角度，并垂直增长。我尝试调整transform-origin属性并添加单独的动画，但无法实现所需的结果。
请有人指导我如何修改CSS动画，使线条从初始的40度角度增长而不旋转？
英文:
I'm working on an animation where I want diagonal lines to grow from their initial height of 0% to 100%, without any rotation. Currently, I have the following CSS code:
HTML
<div class="stripes-1">
<span class="rec-1"></span>
<span class="rec-1"></span>
<span class="rec-1"></span>
<span class="rec-1"></span>
</div>
CSS
.who-we-are {
height: 100vh;
margin: auto;
padding: auto;
}
.stripes-1 {
display: flex;
flex-direction: column;
}
.rec-1 {
transform: scaleX(100%) rotate(40deg);
animation: expandHeight 1s ease-in-out forwards;
width: 72.5%;
margin: 1rem 0;
animation: appearUp 1.5s linear;
transition: ease-in ;
position: relative;
left: 500px;
top: 350px;
}
@keyframes appearUp{
0%{
transform:scaleX(0) rotate(0deg);
}
100%{
transform: scaleX(100%) rotate(40deg);
}
}
.rec-1:nth-of-type(1){
border-bottom: 30px solid #1DCDFE;
}
.rec-1:nth-of-type(2) {
border-bottom: 30px solid #11FFC4;
}
.rec-1:nth-of-type(3) {
border-bottom: 30px solid #21D0B2;
}
.rec-1:nth-of-type(4) {
border-bottom: 30px solid #2F455C;
}
The issue is that the lines not only grow but also rotate during the animation. However, I want them to maintain their initial angle of 40 degrees and grow vertically. I've tried adjusting the transform-origin property and adding separate animations, but I couldn't achieve the desired result.
Could someone please guide me on how to modify the CSS animation to make the lines grow from the initial angle of 40 degrees without rotation?
Updated HTML and CSS
答案1
得分: 1
这个 transform: scaleX(100%) rotate(40deg); 和这个 transform: rotate(40deg) scaleX(100%); - 它们不是相同的东西。
body {
display: grid;
min-height: 100vh;
align-items: end;
overflow: hidden;
margin: 0;
}
.rec-1 {
transform-origin: right bottom;
margin: 1rem 0;
animation: appearUp 1.5s linear both;
transform: rotate(40deg) scaleX(0);
}
@keyframes appearUp {
to {
transform: rotate(40deg) scaleX(100%);
}
}
.rec-1:nth-of-type(1) {
border-bottom: 30px solid #1DCDFE;
}
.rec-1:nth-of-type(2) {
border-bottom: 30px solid #11FFC4;
}
.rec-1:nth-of-type(3) {
border-bottom: 30px solid #21D0B2;
}
.rec-1:nth-of-type(4) {
border-bottom: 30px solid #2F455C;
}
<div class="rec-1"></div>
<div class="rec-1"></div>
<div class="rec-1"></div>
<div class="rec-1"></div>
英文:
This transform: scaleX(100%) rotate(40deg); and this transform: rotate(40deg) scaleX(100%); - it is not the same thing.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
display: grid;
min-height: 100vh;
align-items: end;
overflow: hidden;
margin: 0;
}
.rec-1 {
transform-origin: right bottom;
margin: 1rem 0;
animation: appearUp 1.5s linear both;
transform: rotate(40deg) scaleX(0);
}
@keyframes appearUp {
to {
transform: rotate(40deg) scaleX(100%);
}
}
.rec-1:nth-of-type(1) {
border-bottom: 30px solid #1DCDFE;
}
.rec-1:nth-of-type(2) {
border-bottom: 30px solid #11FFC4;
}
.rec-1:nth-of-type(3) {
border-bottom: 30px solid #21D0B2;
}
.rec-1:nth-of-type(4) {
border-bottom: 30px solid #2F455C;
}
<!-- language: lang-html -->
<div class="rec-1"></div>
<div class="rec-1"></div>
<div class="rec-1"></div>
<div class="rec-1"></div>
<!-- end snippet -->
答案2
得分: 1
1- 我在 .stripes-1 容器上设置了 align-items: flex-start，以将线条对齐到左侧。
2- .rec-1 的 height 属性最初设置为 0，我们使用 expandHeight 动画将其动画到 100%。
3- 我移除了导致旋转和不必要效果的不必要的 transform 和 animation 属性。
4- 使用 border-color 属性为每个 nth-of-type 元素设置了边框颜色，而初始的 border-bottom 颜色设置为透明。
通过这些修改，线条将垂直增长，初始角度为40度，没有旋转。请随时调整边距和其他属性以满足您的动画需求。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<style>
.stripes-1 {
display: flex;
flex-direction: column;
align-items: flex-start; /* Align items to the left side */
margin-left: 200px; /* Adjust the left margin as needed */
}
.rec-1 {
height: 0;
width: 72.5%;
margin: 1rem 0;
position: relative;
left: 10px; /* change left depend on your desire */
top: 30px; /* change top depend on your desire */
border-bottom: 30px solid transparent; /* Set initial border to transparent */
animation: expandHeight 1s ease-in-out forwards;
}
@keyframes expandHeight {
0% {
height: 0; /* Start with 0 height */
}
100% {
height: 100%; /* Expand to 100% height */
}
}
.rec-1:nth-of-type(1) {
border-color: #1DCDFE;
}
.rec-1:nth-of-type(2) {
border-color: #11FFC4;
}
.rec-1:nth-of-type(3) {
border-color: #21D0B2;
}
.rec-1:nth-of-type(4) {
border-color: #2F455C;
}
</style>
</head>
<body>
<div class="stripes-1">
<span class="rec-1"></span>
<span class="rec-1"></span>
<span class="rec-1"></span>
<span class="rec-1"></span>
</div>
</body>
</html>
<!-- end snippet -->
1- i set align-items: flex-start on the .stripes-1 container to align the lines to the left side.
2- The height property of .rec-1 is initially set to 0, and we animate it to 100% using the expandHeight animation.
3- i removed the unnecessary transform and animation properties that were causing the rotation and unwanted effects.
4- The border color is set for each nth-of-type element using the border-color property instead of border-bottom, and the border-bottom color is set to transparent initially.
With these modifications, the lines will grow vertically from their initial angle of 40 degrees without any rotation. Feel free to adjust the margins and other properties to fit your animation requirements.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论