I have the following jsfiddle.
With the following code:
HTML:
<div class="animated-box">Animated box</div>
CSS:
.animated-box {
border:2px solid #bada55;
border-radius: 10px 0;
color: #bada55;
font-size: 20px;
font-weight:bold;
text-align:center;
padding:50px;
width:200px;
-webkit-animation:fontbulger 1s infinite;
-moz-animation: fontbulger 5s infinite;
-o-animation: fontbulger 1s infinite;
animation: fontbulger 1s infinite;
}
#-webkit-keyframes fontbulger {
0%, 100% {
font-size: 15px;
}
50% {
font-size: 20px;
}
}
#-moz-keyframes fontbulger {
0%, 100% {
font-size: 15px;
}
50% {
font-size: 20px;
}
}
#-o-keyframes fontbulger {
0%, 100% {
font-size: 15px;
}
50% {
font-size: 20px;
}
}
#keyframes fontbulger {
0%, 100% {
font-size: 15px;
}
50% {
font-size: 20px;
}
}
How can I change the size of the text, but not the size of the box?
Specify a line-height, for example
line-height:20px;
http://jsfiddle.net/uexwLy75/2/
Give it a height: 30px;
.animated-box {
border:2px solid #bada55;
border-radius: 10px 0;
color: #bada55;
font-size: 20px;
font-weight:bold;
text-align:center;
padding:50px;
width:200px;
height: 30px;
-webkit-animation:fontbulger 1s infinite;
-moz-animation: fontbulger 5s infinite;
-o-animation: fontbulger 1s infinite;
animation: fontbulger 1s infinite;
}
#-webkit-keyframes fontbulger {
0%, 100% {
font-size: 15px;
}
50% {
font-size: 20px;
}
}
#-moz-keyframes fontbulger {
0%, 100% {
font-size: 15px;
}
50% {
font-size: 20px;
}
}
#-o-keyframes fontbulger {
0%, 100% {
font-size: 15px;
}
50% {
font-size: 20px;
}
}
#keyframes fontbulger {
0%, 100% {
font-size: 15px;
}
50% {
font-size: 20px;
}
}
<div class="animated-box">Animated box</div>
Related
I was trying to make a multiple texts changing color animation, like this https://vercel.com. I've nailed down how to make one text change color through keyframes but I can't get them to each text change color on a certain pattern.
For instance enter image description here, you have the word Develop in color red, then it should turn to black and change to the word Preview on blue, and then this would turn to black and the word Ship should turn yellow. And finally this should iterate infinitely.
Here I leave the current code in case it helps:
.center {
margin: 0 auto;
padding-top: 10rem;
}
.awesome {
width: 100%;
margin: 0 auto;
text-align: center;
color: #313131;
font-size: 45px;
font-weight: bold;
position: flex;
-webkit-animation: color-change-red 10s infinite alternate;
-moz-animation: color-change-red 10s infinite alternate;
-o-animation: color-change-red 10s infinite alternate;
-ms-animation: color-change-red 10s infinite alternate;
animation: color-change-red 10s infinite alternate;
}
#-webkit-keyframes color-change-red {
0% { color: red; }
33.3% { color: black; }
100% { color: black; }
}
#-moz-keyframes color-change-red {
0% { color: red; }
33.3% { color: black; }
100% { color: black; }
}
#-ms-keyframes color-change-red {
0% { color: red; }
33.3% { color: black; }
100% { color: black; }
}
#-o-keyframes color-change-red {
0% { color: red; }
33.3% { color: black; }
100% { color: black; }
}
#keyframes color-change-red {
0% { color: red; }
33.3% { color: black; }
100% { color: black; }
}
.awesome2 {
width: 100%;
margin: 0 auto;
text-align: center;
color: #313131;
font-size: 45px;
font-weight: bold;
position: flex;
-webkit-animation: color-change-blue 10s infinite alternate;
-moz-animation: color-change-blue 10s infinite alternate;
-o-animation: color-change-blue 10s infinite alternate;
-ms-animation: color-change-blue 10s infinite alternate;
animation: color-change-blue 10s infinite alternate;
}
#-webkit-keyframes color-change-blue {
0% { color: black; }
33.3% { color: blue; }
66.6% { color: black; }
}
#-moz-keyframes color-change-blue {
0% { color: black; }
33.3% { color: blue; }
66.6% { color: black; }
}
#-ms-keyframes color-change-blue {
0% { color: black; }
33.3% { color: blue; }
66.6% { color: black; }
}
#-o-keyframes color-change-blue {
0% { color: black; }
33.3% { color: blue; }
66.6% { color: black; }
}
#keyframes color-change-blue {
0% { color: black; }
33.3% { color: blue; }
66.6% { color: black; }
}
.awesome3 {
width: 100%;
margin: 0 auto;
text-align: center;
color: #313131;
font-size: 45px;
font-weight: bold;
position: flex;
-webkit-animation: color-change-yellow 10s infinite alternate;
-moz-animation: color-change-yellow 10s infinite alternate;
-o-animation: color-change-yellow 10s infinite alternate;
-ms-animation: color-change-yellow 10s infinite alternate;
animation: color-change-yellow 10s infinite alternate;
}
#-webkit-keyframes color-change-yellow {
0% { color: black; }
66.6% { color: yellow; }
100% { color: black; }
}
#-moz-keyframes color-change-yellow {
0% { color: black; }
66.6% { color: yellow; }
100% { color: black; }
}
#-ms-keyframes color-change-yellow {
0% { color: black; }
66.6% { color: yellow; }
100% { color: black; }
}
#-o-keyframes color-change-yellow {
0% { color: black; }
66.6% { color: yellow; }
100% { color: black; }
}
#keyframes color-change-yellow {
0% { color: black; }
66.6% { color: yellow; }
100% { color: black; }
}
<div class='center'>
<p class="awesome">Develop</p>
<p class="awesome2">Preview</p>
<p class="awesome3">Ship</p>
</div>
One observation is that in the example site you link to it appears that the colored words stay colored for a bit rather than immediately start to merge with black.
This snippet holds them colored for 30% of the animation, then quite swiftly takes them down to black at a third of the way through the animation.
The other observation is that there is a lot of repeated code here which can make it difficult to see what is going on.
This snippet gives each word the same animation but delays the second one by a third of the total animation time and the third one by two thirds.
It also uses a CSS variable for the color so the same keyframes code can be used for each word.
For clarity it also strips out the browser-specific settings - of course put them back in if required in your use case.
.center {
margin: 0 auto;
padding-top: 10rem;
}
.awesome {
width: 100%;
margin: 0 auto;
text-align: center;
color: #313131;
font-size: 45px;
font-weight: bold;
position: flex;
--duration: 10s;
animation: color-change var(--duration) infinite;
}
.awesome:nth-child(1) {
--color: red;
}
.awesome:nth-child(2) {
--color: blue;
animation-delay: calc(var(--duration) / 3)
}
.awesome:nth-child(3) {
--color: yellow;
animation-delay: calc(var(--duration) * 2 / 3);
}
#keyframes color-change {
0% {
color: var(--color);
}
30% {
color: var(--color);
}
33.3333% {
color: black;
}
100% {
color: black;
}
}
<div class='center'>
<p class="awesome">Develop</p>
<p class="awesome">Preview</p>
<p class="awesome">Ship</p>
</div>
body {
background: hsl(210, 100%, 95%);
}
#Title {
font-family: Lobster, monospace;
font-size: 45px;
text-align: center;
color: white;
}
h1:hover {
color: black;
transform: scale(1.2)
}
.circles {
height: 80px;
width: 80px;
border-radius:50%;
border:solid;
position:fixed;
animation-name: 123;
animation-iteration-count: infinite;
animation-duration: 10s;
}
#circle1 {
animation-timing-function: linear;
background: linear-gradient(45deg, #ccffff, #ffcccc);
left:50%;
}
#circle2 {
animation-timing-function: linear;
background: repeating-linear-gradient(90deg, #A52A2A 2px, #cccccc 5px, orange 10px);
left:25%;
}
#keyframes 123 {
50% {
bottom: 10%;
}
}
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<head>
<title>Animation-1</title>
</head>
<body>
<h1 id="Title">Placeholder</h1>
<div class="circles" id="circle1"> </div>
<div class="circles" id="circle2"> </div>
</body>
</html>
Gone over it 3 times already, can't see where im messing up
try to use string instead of number in keyframes naming
here is your animation example. https://codepen.io/baomastr/pen/KKgNGbg
.circles {
height: 80px;
width: 80px;
border-radius: 50%;
border: solid;
position: absolute;
animation-name: test;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 5s;
}
#circle1 {
background: linear-gradient(45deg, #ccffff, #ffcccc);
left: 50%;
}
#circle2 {
background: repeating-linear-gradient(
90deg,
#a52a2a 2px,
#cccccc 5px,
orange 10px
);
left: 25%;
}
#keyframes test {
0% {
transform: translateY(0);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(0);
}
}
<div class="circles" id="circle1"> </div>
<div class="circles" id="circle2"> </div>
1st is keyframe with number is not accepted. 2nd In you keyframe you need to specify 0% and 100% as well. To be for example like:
#keyframes slidein {
0% { bottom: 60%; }
50% { bottom: 10%; }
100% { bottom: 0%; }
}
DEMO:
body {
background: hsl(210, 100%, 95%);
}
#Title {
font-family: Lobster, monospace;
font-size: 45px;
text-align: center;
color: white;
}
h1:hover {
color: black;
transform: scale(1.2)
}
.circles {
height: 80px;
width: 80px;
border-radius:50%;
border:solid;
position:fixed;
animation-name: slidein;
animation-iteration-count: infinite;
animation-duration: 10s;
}
#circle1 {
animation-timing-function: linear;
background: linear-gradient(45deg, #ccffff, #ffcccc);
left:50%;
}
#circle2 {
animation-timing-function: linear;
background: repeating-linear-gradient(90deg, #A52A2A 2px, #cccccc 5px, orange 10px);
left:25%;
}
#keyframes slidein {
0% { bottom: 60%; }
50% { bottom: 10%; }
100% { bottom: 0%; }
}
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<head>
<title>Animation-1</title>
</head>
<body>
<h1 id="Title">Placeholder</h1>
<div class="circles" id="circle1"> </div>
<div class="circles" id="circle2"> </div>
</body>
</html>
Anyone know what I'm doing wrong? I can't put the two elements in the same line and they are in two separate levels.
I would like to recreate, using only HTML and Css, an automatic typewriter effect with variable text.
I am a beginner with HTML and Css so I don't understand much but it would be very nice if someone explained my mistake in detail.
body {
background-color: black;
color: white;
font-size: 100px;
}
h1 {
font-size: 30px;
}
.text_1 {
animation: text1;
}
.text_2 {
animation: text2;
}
.text_1, .text_2 {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
animation-duration: 20s;
animation-timing-function: steps(25, end);
animation-iteration-count: infinite;
}
.text_1::after, .text_2::after {
content: "|";
position: absolute;
right: 0;
animation: caret infinite;
animation-duration: 1s;
animation-timing-function: steps(1, end);
}
#keyframes text2 {
0%, 50%, 100% {
width: 0;
}
60%, 90% {
width: 6.50em;
}
}
#keyframes text1 {
0%, 50%, 100% {
width: 0;
}
10%, 40% {
width: 8em;
}
}
#keyframes caret {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
<h1>Hi, i'm a <span class="text_1">Graphic Designer</span><span class="text_2">Photographer</span></h1>
I solved by adding display:flex; align-items: baseline; to h1.
The flexbox items are aligned at the baseline of the cross axis.
By default, the cross axis is vertical. This means the flexbox items
will align themselves in order to have the baseline of their text
align along a horizontal line.
body {
background-color: black;
color: white;
font-size: 100px;
}
h1 {
font-size: 30px;
display:flex;
align-items: baseline;
}
.text_1 {
animation: text1;
}
.text_2 {
animation: text2;
}
.text_1, .text_2 {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
animation-duration: 20s;
animation-timing-function: steps(25, end);
animation-iteration-count: infinite;
}
.text_1::after, .text_2::after {
content: "|";
position: absolute;
right: 0;
animation: caret infinite;
animation-duration: 1s;
animation-timing-function: steps(1, end);
}
#keyframes text2 {
0%, 50%, 100% {
width: 0;
}
60%, 90% {
width: 6.50em;
}
}
#keyframes text1 {
0%, 50%, 100% {
width: 0;
}
10%, 40% {
width: 8em;
}
}
#keyframes caret {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
<h1>Hi, i'm a <span class="text_1">Graphic Designer</span><span class="text_2">Photographer</span></h1>
Like a progress bar:
span {
display: inline-block;
width: 20%;
text-align: center;
outline: 1px solid black;
font-weight: bold;
}
span:nth-child(1) {
animation: bar 1s linear;
}
#keyframes bar {
0% {
color: black;
background: white;
}
100% {
color: white;
background: black;
}
}
<p><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p>
I'd like the next <span> to blink for a second and then the third one and so on. Is it possible with CSS?
Use the following CSS:
span {
display: inline-block;
width: 20%;
text-align: center;
outline: 1px solid black;
font-weight: bold;
color: black;
background: white;
}
span:nth-child(1){
animation: bar 1s linear 0s forwards;
}
span:nth-child(2){
animation: bar 1s linear 1s forwards;
}
span:nth-child(3){
animation: bar 1s linear 2s forwards;
}
span:nth-child(4){
animation: bar 1s linear 3s forwards;
}
span:nth-child(5){
animation: bar 1s linear 4s forwards;
}
#keyframes bar {
0% {
color: black;
background: white;
}
100% {
color: white;
background: black;
}
}
<p><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p>
With CSS you can just declare static code, so if you know exactly how many spans will be used there is no problem. If you want something recursive (first then the next one, until there are spans) you can do that only with JS.
Note that in this example I know precisely how many child the p has.
span {
display: inline-block;
width: 20%;
text-align: center;
outline: 1px solid black;
font-weight: bold;
color: black;
background: white;
animation: bar 5s linear infinite;
}
span:nth-child(2) {
animation-delay: 1s;
}
span:nth-child(3) {
animation-delay: 2s;
}
span:nth-child(4) {
animation-delay: 3s;
}
span:nth-child(5) {
animation-delay: 4s;
}
#keyframes bar {
0% {
color: black;
background: white;
}
10% {
color: white;
background: black;
}
11% {
color: black;
background: white;
}
100% {
color: black;
background: white;
}
}
<p><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p>
I got this banner thingy from a tutorial, but the thing is, instead of the banner continuing in loops, it resets instead. I don't want to use any javascript since we we're not yet tackling it in uni. Can anyone point out where I did wrong and how to fix it? Thanks.
Here are the images:
[1]
[2]
and this is the code I used
HTML:
<div class="photobanner">
<img class="first" src="images/scroll/ban.jpg" style="width:350px;height:233px;"/>
<img src="images/scroll/banner1.png" style="width:350px;height:233px;"/>
<img src="images/scroll/banner3.jpg" style="width:350px;height:233px;"/>
<img src="images/scroll/banner4.jpg" style="width:350px;height:233px;"/>
<img src="images/scroll/banner5.jpg" style="width:350px;height:233px;"/>
</div>
</div>
CSS:
/*body and container*/
* {
margin: 0;
padding: 0;
}
body {
background-image:url(images/banner1takuya.jpg);
background-size: cover;
background-attachment: fixed;
}
#container {
width:865px;
height:auto;
margin:auto;
padding:0 0 30px 0;
background-image:url(images/bg.png);
}
/*header*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
You have the .photobanner width set to 3550px, but the sum of images' widths is 355*5=1775px only.
You need to add 5 more images of the same size and this will work correctly.