I want to use two different keyframes animations, but when i name the second animation it does not seem to work. Basically i want to add the first animation to the first wrapper, and the second animation to the second wrapper at the same time, why this does not work?
#keyframes scroll {
0% {
-webkit-transform: translate(-30%, 0);
}
100% {
-webkit-transform: translate(-100%, 0);
}
}
#keyframes second {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-200%, 0);
}
}
.marquee {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.wrapper {
background-color: lightblue;
display: inline-block;
padding-left: 100%;
animation: scroll 20s infinite linear;
}
.wrapper div {
background-color: whitesmoke;
display: inline-block;
margin-right: 10rem;
}
.wrapper div:last-child {
margin-right: 0px;
}
.wrapper2 {
background-color: lightblue;
display: inline-block;
padding-left: 100%;
animation: second 40s infinite linear;
}
.wrapper2 div {
background-color: whitesmoke;
display: inline-block;
margin-right: 10rem;
}
.wrapper2 div:last-child {
margin-right: 0px;
}
<div class="marquee">
<div class="wrapper">
<div>Akinfenwa</div>
<div>Dickenson</div>
<div>Watkins</div>
<div>Cowan-Hall</div>
</div>
<div class="wrapper2">
<div>Akinfenwa</div>
<div>Dickenson</div>
<div>Watkins</div>
<div>Cowan-Hall</div>
</div>
</div>
#keyframes scroll {
0% {
-webkit-transform: translate(-30%, 0);
}
100% {
-webkit-transform: translate(-100%, 0);
}
}
#keyframes second {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-200%, 0);
}
}
.marquee {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.wrapper {
background-color: lightblue;
display: inline-block;
padding-left: 100%;
animation: scroll 10s infinite linear;
}
.wrapper div {
background-color: whitesmoke;
display: inline-block;
margin-right: 10rem;
}
.wrapper div:last-child {
margin-right: 0px;
}
.wrapper2 {
background-color: lightblue;
display: inline-block;
padding-left: 100%;
animation: second 20s infinite linear;
}
.wrapper2 div {
background-color: whitesmoke;
display: inline-block;
margin-right: 10rem;
}
.wrapper2 div:last-child {
margin-right: 0px;
}
<div class="marquee">
<div class="wrapper">
<div>Akinfenwa</div>
<div>Dickenson</div>
<div>Watkins</div>
<div>Cowan-Hall</div>
</div>
<div class="wrapper2">
<div>Akinfenwa2</div>
<div>Dickenson2</div>
<div>Watkins2</div>
<div>Cowan-Hall2</div>
</div>
</div>
Related
I want to:
Align the circle (containing exclamation mark) with the dashed vertical line.
Make the circle bounce along the vertical line while changing the height of the dashed vertical line accordingly.
Can you please tell me how can I achieve that in CSS? thank in advance.
.pin{
display:inline-block;
align-contents: center;
}
.circle {
color: #ffffff;
background: #ff5500;
width: 30px;
height: 30px;
border-radius: 50%;
text-align: center;
font-size: 25px;
font-weight: bold;
display: inline-block;
animation: blinkingBackground 1s infinite;
}
#keyframes blinkingBackground {
0% {
opacity: 0;
transform: translateY(-10px);
}
25% {
opacity: 0.025;
transform: translateY(10px);
}
50% {
opacity: 0.05;
transform: translateY(-10px);
}
75% {
opacity: 0.075;
transform: translateY(10px);
}
100% {
opacity: 1;
}
}
.vline{
border-left: 1px dashed orangered;
height: 50px;
position: relative;
}
<div class="pin">
<div class="circle">
!
</div>
<div class="vline"></div>
</div>
#1 Align circle with line
For your .vline class add those two properties. Width in order to have the one pixel width from your border. And margin: 0 auto will center your div inside the parent div.
width: 1px;
margin: 0 auto;
#2 Reduce height while bouncing
Just add another animation to your .vline class.
In the example below I also changed the height from 50px to 0, that's keeping the .vline at zero pixels after animation is done. And instead I'm setting at keyframe 0% the height to 50px.
Depending on how many pixels you want to reduce it, you will need more keyframes. In the example I've reduced the height by 10px per second, so I have 5 keyframes with 10px steps.
#keyframes reduceHeight {
0% {
height: 50px;
}
20% {
height: 40px;
}
40% {
height: 30px;
}
60% {
height: 20px;
}
80% {
height: 10px;
}
100% {
height: 0px;
}
}
And here the working example
.pin{
display:inline-block;
align-contents: center;
}
.circle {
color: #ffffff;
background: #ff5500;
width: 30px;
height: 30px;
border-radius: 50%;
text-align: center;
font-size: 25px;
font-weight: bold;
display: inline-block;
animation: blinkingBackground 1s infinite;
}
.vline{
width: 1px;
margin: 0 auto;
border-left: 1px dashed orangered;
height: 0;
position: relative;
animation: reduceHeight 5s;
}
#keyframes blinkingBackground {
0% {
opacity: 0;
transform: translateY(-10px);
}
25% {
opacity: 0.025;
transform: translateY(10px);
}
50% {
opacity: 0.05;
transform: translateY(-10px);
}
75% {
opacity: 0.075;
transform: translateY(10px);
}
100% {
opacity: 1;
}
}
#keyframes reduceHeight {
0% {
height: 50px;
}
20% {
height: 40px;
}
40% {
height: 30px;
}
60% {
height: 20px;
}
80% {
height: 10px;
}
100% {
height: 0px;
}
}
<div class="pin">
<div class="circle">
!
</div>
<div class="vline"></div>
</div>
It's not perfect yet and you'll have to play around with positionings (maybe even have to add them to the animations), depending on what exactly you wanna acchieve. But it should give you a general idea and ONE possibility on how to do it. There might be different methods to do the same.
I am studying CSS animation. I want my animation moving one by one, as I don't know JS I want to do it by CSS only. How can I do this? I faced the problem of rules from and to in animations, when I change them the animations don't work as expected.
I have the following HTML
body {
margin: 0;
background: grey;
}
main {
font-family: Open Sans;
text-transform: uppercase;
line-height: 1;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.animation {
width: 20em;
height: 4em;
margin: 1em auto;
position: relative;
}
.squares {
margin: auto;
background: red;
/* display: flex;
flex-wrap: wrap;
justify-content: center;*/
}
.small_square {
width: 10px;
height: 10px;
background-color: white;
text-align: center;
display: block;
text-align: center;
position: relative;
margin: 0;
padding: 0;
left: 48%;
animation: appearance_small 1s ease-in-out;
animation: move_around 3s ease-in-out;
*/
}
.big_square {
margin: auto;
width: 40px;
height: 40px;
background-color: black;
display: block;
position: relative;
top: 30px;
animation: appearance_big 1.3s ease-in-out;
animation-delay: 2s;
animation: spin 3s ease-in-out;
forwards;
}
#keyframes appearance_big {
0% {
transform: scale(0%);
}
100% {
opacity: 1;
}
}
#keyframes appearance_small {
0% {
opacity: 0;
transform: scale(0%);
top: 50px;
}
100% {
opacity: 1;
top: 0px;
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
#keyframes move_around {
from {
transform: translate(50%, 50px) rotate(0turn) translate(-50%, -50px);
}
to {
transform: translate(50%, 50px) rotate(0.50turn) translate(-0%, -50px);
}
<main>
<div id="animation" class="animation">
<div class="squares">
<div class="small_square"></div>
<div class="big_square"></div>
</div>
</main>
So I've tried separating the animations with a comma and having them on the same transform but it still doesn't work.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background: silver;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 20%;
height: 20%;
background-color: pink;
transform: rotate(0deg) translatey(0px);
animation: wavy 3s linear infinite alternate,
float 3s linear infinite alternate;
}
#keyframes wavy {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-10deg);
}
100% {
transform: rotate(10deg);
}
}
#keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
}
<div class="container">
<div class="box"></div>
</div>
And here's a link to the codepen:
https://codepen.io/FaroukHamadi/pen/OJOWWKW
Yes - add an id to the div and set that animation on the specified id. For your example, I called it #box
EDIT ~ the id solution I had previously worked flawlessly UNLESS there are two transforms being used in the keyframe which is your case. What I would suggest is just combining the two animations into one animation and using more % increments. So instead of 0, 50, and 100, you can use 0, 25, 50, 75, 100 - to combine the two and have it seem like they are "alternating"
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background: silver;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 20%;
height: 20%;
background-color: pink;
transform: rotate(0deg) translatey(0px);
animation: wavy-float 3s linear infinite alternate;
}
#keyframes wavy-float {
0% {
transform: rotate(0deg):
}
25% {
transform: rotate(-20deg);
}
50% {
transform: translateY(-20px);
}
75% {
transform: rotate(20deg);
}
100% {
transform: translateY(20px)
}
}
<div class="container">
<div class="box"></div>
</div>
I am doing a typewriter effect where my name gets typed out, and the only thing that works to keep it centered is justify-content: center. The only thing is, I cannot put a paragraph underneath the flex item, and paragraph acts like it isn't there and nothing seems to work. I have tried top: 315px; but it doesn't work.
body {
min-height: 100%;
display: flex;
justify-content: center;
}
h1 {
position: absolute;
animation: type 1s steps(22), blinkTextCursor 500ms steps(44) infinite normal;
overflow: hidden;
white-space: nowrap;
border-right: 4px solid black;
width: 14ch;
transform: translateY(-50%) scale(2);
}
#keyframes type {
0% {
width: 0ch;
}
100% {
width: 15ch;
}
}
#keyframes blinkTextCursor {
from {
border-right-color: black;
}
to {
border-right-color: transparent;
}
#welcome {
position: relative;
top: 315px;
}
<body>
<h1>Hi, I'm Winston</h1>
<p id="welcome">text</p>
</body>
Just needed to remove position absolute and add a flex-direction which in your case is column
body {
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
animation: type 1s steps(22),
blinkTextCursor 500ms steps(44) infinite normal;
overflow: hidden;
white-space: nowrap;
border-right: 4px solid black;
width: 14ch;
transform:translateY(-50%) scale(2);
}
#keyframes type {
0% {
width: 0ch;
}
100% {
width: 15ch;
}
}
#keyframes blinkTextCursor{
from{
border-right-color:black;
}
to{
border-right-color:transparent;
}
#welcome {
position: relative;
top: 315px;
}
<body>
<h1>Hi, I'm Winston</h1>
<p id="welcome">text</p>
</body>
Add this to your css.
#welcome{
position: absolute;
margin-top: 100px;
}
Final CSS.
body {
min-height: 100%;
display: flex;
justify-content: center;
align-content: center;
}
h1 {
position: absolute;
animation: type 1s steps(22), blinkTextCursor 500ms steps(44) infinite normal;
overflow: hidden;
white-space: nowrap;
border-right: 4px solid black;
width: 14ch;
transform: translateY(-50%) scale(2);
}
#welcome{
position: absolute;
margin-top: 100px;
}
#keyframes type {
0% {
width: 0ch;
}
100% {
width: 15ch;
}
}
#keyframes blinkTextCursor {
from {
border-right-color: black;
}
to {
border-right-color: transparent;
}
}
Problem
I've made a simple css animation, but it's not behaving as I expect it.
The idea is for the animation to draw a straight line (from top downwards) , and the disappear (also from the top downwards).
The start of the line moves down a bit, as the animation starts, then up again to stay at set position (same goes for the bottom at the end of the animation).
Question
How do I get the start of the line to stay at one position instead of 'bouncing' down and up?
Expected behavior
Actual behavior
Code
.lineWrapper {
width: 1px;
height: 300px;
margin: auto;
position: relative;
}
.lineWrapper .line {
width: 100%;
height: 100%;
background: #000;
animation: scrollLine 5s linear infinite;
}
#keyframes scrollLine {
0% {
transform: scaleY(0);
}
10% {
transform: scaleY(0);
transform-origin: top;
}
30% {
transform: scaleY(1);
}
70% {
transform: scaleY(1);
}
90% {
transform: scaleY(0);
transform-origin: bottom;
}
100% {
transform: scaleY(0);
}
}
<div class="lineWrapper">
<div class="line"></div>
</div>
Codepen
https://codepen.io/strazan/pen/RwPYgjq
The default transform-origin is center so if you omit it in the initial and last state it will be set to center. You need to also have an instant change of the transform-origin in the middle:
.lineWrapper {
width: 1px;
height: 300px;
margin: auto;
position: relative;
}
.line {
height: 100%;
background: #000;
animation: scrollLine 5s infinite;
}
#keyframes scrollLine {
0%,10% {
transform: scaleY(0);
transform-origin: top;
}
49.9% {
transform: scaleY(1);
transform-origin: top;
}
50% {
transform: scaleY(1);
transform-origin: bottom;
}
90%,100% {
transform: scaleY(0);
transform-origin: bottom;
}
}
<div class="lineWrapper">
<div class="line"></div>
</div>
I have made similar CSS animation with some different code lines.
body {
margin: 0px;
display: flex;
justify-content: center;
background: black;
overflow: hidden;
}
.line-wrapper {
height: 800px;
width: 8px;
background: tranparent;
display: flex;
justify-content: center;
animation: down 2s linear infinite;
}
#keyframes down {
0% {
transform: translateY(0px);
}
15% {
transform: translateY(0px);
}
30% {
transform: translateY(0px);
}
60% {
transform: translateY(90px);
}
90% {
transform: translateY(115px);
}
100% {
transform: translateY(115px);
}
}
.line {
height: 8px;
width: 4px;
background: Gray;
animation: scrollLine 2s ease-in-out infinite;
}
#keyframes scrollLine {
100% {
height: 800px;
}
}
.eraser {
height: 0px;
width: 4px;
background: black;
animation: rmv 2s linear infinite;
}
#keyframes rmv {
55% {
height: 0px;
}
100% {
height: 800px;
}
}
<div class="line-wrapper">
<div class="line">
<div class="eraser"></div>
</div>
</div>