I want to rotate text like this first, and then scroll bottom to top infinitely, I have checked answers like CSS animate scrolling text using text-indent, anyone who can help? Thanks in advance.
What I found was that the behavior of the writing-mode of the English characters is different from that of the Chinese characters.
writing-mode: vertical-lr;
Here is the behavior of the writing-mode of the Chinese characters.
Update
Thanks to #ulou, I changed the code he posted. The original question did not describe clearly. I removed the animation rotate 0 to rotate 90.
.container {
width: 100%;
height: 100vh;
background-color: black;
color: white;
display: flex;
justify-content: center;
}
.cool-text {
align-self: center;
animation: 4s coolAnimation infinite;
font-size: 100px;
white-space: nowrap;
}
#keyframes coolAnimation {
0% {
transform: rotate(90deg);
}
100% {
transform: rotate(90deg) translateX(-100vh);
}
}
<div class="container">
<div class="cool-text">我來试一下效果怎么样</div>
</div>
I just need the infinite animation from bottom to top, below is my code without
animation. You see there is padding-left: 100vh, also I need all the text to disappear in the previous frame before the new frame begins, something like loop text or circular playing.
body {
background: black;
}
.main-nav {
color: white;
font-size: 50vw;
text-align: center;
white-space: nowrap;
height: 100vw;
line-height: 100vw;
transform: rotate(90deg) translateY(-100%);
transform-origin: left top;
width: 100vh;
padding-left: 100vh;
}
<div class="main-nav">
我来试试效果哈哈哈哈
</div>
.container {
width: 100%;
height: 95vh;
background-color: black;
color: white;
display: flex;
justify-content: center;
}
.cool-text {
align-self: center;
font-size: 100px;
transform: rotate(90deg);
animation: 6s coolAnimation infinite;
animation-timing-function: linear;
white-space: nowrap;
width: 100%;
}
#keyframes coolAnimation {
0% {
transform: rotate(90deg) translateX(300vh);
}
100% {
transform: rotate(90deg) translateX(-300vh);
}
}
<div class="container">
<div class="cool-text">Cool animated text</div>
</div>
Related
i want to make a animation for a circle that splits open on two sides:
kind of like the 🎊 emoji flipped upside down. I have two half circle elments and i put them next to each other. I tryed to animate one of the sides but its not really what im going for, i wanted the split to pivot on the bottom of the semi-circle not in the middle. Since the circle is split and right next to each other in two when you rotate one of the halfs it overlaps, i didnt attempt to fix it yet (i was think move it to the left/right over the animation but i dont know...).
.circlecontainer {
display: flex;
justify-content: center;
align-items: center;
}
.halfright {
width: 150px;
height: 300px;
border-top-right-radius: 150px;
border-bottom-right-radius: 150px;
background: orange;
}
.halfleft {
width: 150px;
height: 300px;
border-top-left-radius: 150px;
border-bottom-left-radius: 150px;
background: orange;
animation: splitleft 3s;
}
#keyframes splitleft {
0% {
transform: rotate(-0deg)
}
100% {
transform: rotate(-90deg)
}
}
<div class="circlecontainer">
<div class="halfleft"></div>
<div class="halfright"></div>
</div>
thats it! I hope this makes sense since its hard to explain...
You're looking for transform-origin
.circlecontainer {
display: flex;
justify-content: center;
align-items: center;
}
.halfright {
width: 150px;
height: 300px;
border-top-right-radius: 150px;
border-bottom-right-radius: 150px;
background: orange;
animation: splitright 3s;
transform-origin: bottom left;
}
.halfleft {
width: 150px;
height: 300px;
border-top-left-radius: 150px;
border-bottom-left-radius: 150px;
background: orange;
animation: splitleft 3s;
transform-origin: bottom right;
}
#keyframes splitleft {
0% {
transform: rotate(-0deg)
}
100% {
transform: rotate(-90deg)
}
}
#keyframes splitright {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(90deg)
}
}
<div class="circlecontainer">
<div class="halfleft"></div>
<div class="halfright"></div>
</div>
Transforms will always rotate, scale, etc. from the center of the div (by default). In this case you want to pivot from where the circles meet at the bottom, use transform-origin to do this:
.circlecontainer {
display: flex;
justify-content: center;
align-items: center;
}
.halfright {
width: 150px;
height: 300px;
border-top-right-radius: 150px;
border-bottom-right-radius: 150px;
background: orange;
transform-origin: bottom left; /* THIS ONE!! */
animation: splitright 3s forwards;
}
.halfleft {
width: 150px;
height: 300px;
border-top-left-radius: 150px;
border-bottom-left-radius: 150px;
background: orange;
transform-origin: bottom right; /* THIS ONE!! */
animation: splitleft 3s forwards;
}
#keyframes splitleft {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-90deg);
}
}
#keyframes splitright {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(90deg);
}
}
<div class="circlecontainer">
<div class="halfleft"></div>
<div class="halfright"></div>
</div>
I am trying to add scale up animation on a div.
I tried this using both transition and animation property.
In case of transition you can notice that when hovered out the animation is smoothly reversed. However, this doesn't happen when using animation property (the div transitions back to initial width instantly)
Can someone tell me:
Why this behaviour in case of animation only?
How can I achieve the same using animation property?
.animations {
display: flex;
padding: 80px;
width: 100vw;
height: 100vh;
background: linear-gradient(to right, #f3d2d2, white, #cee5f3);
}
.animations > div {
width: 200px;
height: 200px;
margin: 40px;
font-family: system-ui;
display: flex;
flex-direction: column;
align-items: center;
}
.animations > p {
color: black;
flex: 1;
text-align: center;
}
.animations .animated-box {
flex: 2;
width: 100%;
background: grey;
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.animated-box.scale-up {
}
.animated-box.scale-up:hover {
animation: scale-up 0.5s ease forwards;
transform: scale(1);
}
.animated-box.scale-up-with-mouseout {
transition: transform 0.5s ease-in;
}
.animated-box.scale-up-with-mouseout:hover {
transform: scale(1.2);
}
#keyframes scale-up {
100% {transform: scale(1.2)};
0%{transform: scale(1)};
}
<div class="animations">
<div>
<div class="animated-box scale-up">Hover me</div>
<p>Scale up (with keyframes)</p>
</div>
<div>
<div class="animated-box scale-up-with-mouseout">Hover me</div>
<p>Scale up (with transition)</p>
</div>
</div>
I have a basic button, which I animate initially. But once animated, I want to add a new animation on hover; but it seems to not work for some reason.
For example:
button animation:
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
max-height: 100%;
overflow: hidden;
}
.slide-btn {
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
background-color: #feffff;
box-shadow: 0 2px 20px 0 #686f7638;
margin-top: 10px;
width: 45px;
height: 45px;
animation: testing 1s ease-in forwards;
}
.slide-btn:hover {
transform: scale(1.5);
}
#keyframes testing {
to {
transform: translateX(100px);
}
}
<div class="container">
<div class="slide-btn">></div>
</div>
My guess is that for the CSS animation I'm using forwards, but I really need forwards to be there.
Yes, it's because the forwards that make the animation to override the transform. Instead of forwards you can do like below:
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
max-height: 100%;
overflow: hidden;
}
.slide-btn {
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
background-color: #feffff;
box-shadow: 0 2px 20px 0 #686f7638;
margin-top: 10px;
width: 45px;
height: 45px;
transform: translateX(100px);
transition:0.5s;
animation: testing 1s ease-in;
}
.slide-btn:hover {
transform: translateX(100px) scale(1.5);
}
#keyframes testing {
from {
transform: translateX(0px);
}
}
<div class="container">
<div class="slide-btn">></div>
</div>
how about adding 'animation-fill-mode: none' to '.slide-btn:hover':
.slide-btn:hover {
animation-fill-mode: none;
transform: scale(1.5);
}
I've made a heart with CSS and made it resize, go small - big every second, like normally. But I noticed this strange wobble, that I didn't really put there and is really painful to look at. I aware of few possible duplicate questions, but they didn't really help. Here's a fiddle.
html,
body,
.container {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.heart {
display: flex;
justify-content: center;
align-items: center;
background-color: red;
transform: rotate(-45deg);
transform-style: preserve-3d;
animation: growMain 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.heart:after,
.heart:before {
background-color: red;
content: "";
border-radius: 50%;
position: absolute;
transform: translateZ(-1px);
}
.heart:after {
animation: growAfter 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.heart:before {
animation: growBefore 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes growMain {
from {
width: 50px;
height: 50px;
}
to {
width: 80px;
height: 80px;
}
}
#keyframes growAfter {
from {
left: 25px;
width: 50px;
height: 50px;
}
to {
left: 40px;
width: 80px;
height: 80px;
}
}
#keyframes growBefore {
from {
top: -25px;
width: 50px;
height: 50px;
}
to {
top: -40px;
width: 80px;
height: 80px;
}
}
.inner {
display: initial;
transform: rotate(45deg);
}
.text {
text-align: center;
color: white;
font-family: "Comic Sans MS";
font-size: 100%;
margin: 0;
}
<div class="container">
<div class="heart">
<div class="inner">
<p class="text">Some text</p>
</div>
</div>
</div>
Animating actual width/height/position tends to not perform super well, especially when doing multiple animations at once like you are here. Moving/resizing elements with transform tends to perform better.
In this case, I would recommend setting the initial size of your heart and then using a scale transformation to make the pulse effect. With this approach, you also get the added benefit of going from three animations to one, which is easier for the browser to handle, and you don't have to worry about syncing them all up.
In order to make the text not shrink along with the heart, you can put a wrapper around it, and absolutely position the text in the center of the wrapper, on top of the heart. Then just transform the heart itself, not the wrapper. (Or if you want the text to shrink along with the heart, keep the same HTML structure you have now.)
html,
body,
.container {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.heart-wrapper {
position: relative;
width: 80px;
height: 80px;
}
.heart {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: red;
transform: rotate(-45deg) scale(1);
transform-style: preserve-3d;
animation: pulse 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.heart::before {
left: 40px;
}
.heart::after {
top: -40px;
}
.heart::after,
.heart::before {
background-color: red;
content: "";
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
transform: translateZ(-1px);
}
#keyframes pulse {
from {
transform: rotate(-45deg) scale(1);
}
to {
transform: rotate(-45deg) scale(0.6);
}
}
.text {
position: absolute;
top: 40%; /* slightly off-center to the top, so it appears centered when the heart shrinks */
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
font-family: "Comic Sans MS";
font-size: 100%;
margin: 0;
}
<div class="container">
<div class="heart-wrapper">
<div class="heart"></div>
<div class="text">some text</div>
</div>
</div>
I want to make two-step progress bar animation: the red bar run to the middle and its color is turned to yellow, then another yellow bar will appear in the middle and runs to the end.
I tried to add "display: none" in class progressbar2 but it will disappear in the beginning. How can I do to make yellow bar (class:progressbar2) appear after 2 seconds and it doesn't appear in the beginning?
Here is codepen code
.container1 {
position: relative;
width: 100%;
margin-top: 10px;
}
.progress1 {
height: 10px;
width: 50%;
background-color: yellow;
border-radius: 2px;
animation: becomeyellow 2s linear;
display: flex;
float: left;
}
.progress2 {
height: 10px;
width: 50%;
position: absolute;
left: 50%;
background-color: green;
border-radius: 2px;
animation: becomegreen 2s 2s linear;
}
#keyframes becomeyellow {
0% {
width: 0%;
background-color: red;
}
100% {
width: 50%;
background-color: yellow;
}
}
#keyframes becomegreen {
0% {
width: 0%;
background-color: yellow;
display: none;
}
100% {
width: 50%;
background-color: green;
}
}
<div class="container1">
<div class="progress1"></div>
<div class="progress2"></div>
</div>
I added opacity:0 in the progress2 class at the last line.
And on the animation becomegreen I added opacity:1 when you're setting 100% of the animation.
And that worked very well.