I'm currently developing a website for a group, and I'm trying to animate some dots in the word "Loading..." so they blink. I've got the animation working, but for some reason the dots aren't showing up unless I highlight the text with my cursor.
#keyframes blink {
0% {
opacity: .2;
}
20% {
opacity: 1;
}
100% {
opacity: .2;
}
}
.text span {
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.text span:nth-child(2) {
animation-delay: .2s;
}
.text span:nth-child(3) {
animation-delay: .4s;
}
.text {
width: 300px;
height: 70px;
font-size: 30px;
background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
color: white;
}
<div class="text">Loading<span>.</span><span>.</span><span>.</span></div>
The "Loading" part of the text is showing up fine though. Any ideas?
Thanks
You need a color to fall back on for the transparency.
As it stands now, it's already transparent, so the opacity does nothing. If you have a color to go to (not just transparent), it'll show that the relevant percentage, mixed with the gradient. I've done that in the example below using black as the "background".
#keyframes blink {
/* changes the values here */
0% {
-webkit-text-fill-color: rgba(0, 0, 0, 0.2);
}
20% {
-webkit-text-fill-color: rgba(0, 0, 0, 1);
}
100% {
-webkit-text-fill-color: rgba(0, 0, 0, 0.2);
}
}
.text span {
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.text span:nth-child(2) {
animation-delay: .2s;
}
.text span:nth-child(3) {
animation-delay: .4s;
}
.text {
width: 300px;
height: 70px;
font-size: 30px;
background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
color: white;
}
<div class="text">Loading<span>.</span><span>.</span><span>.</span></div>
Related
I would like to make an animation that makes the text appear with a prompt like in the following video: https://uploads-ssl.webflow.com/61f84f92347c1507dede5924/624f203e8226d749d47b0806_Animation_Slogan_logo-final-transcode.mp4
But I don't understand how to make it responsive on phone and web, would you have any instructions please?
Also how can I make the border blink on the first 3 words too?
Here is the result I managed to get:
.typewriter {
max-width: 170px;
height: 250px;
position: absolute;
top: 78%;
right: 33%;
transform: translate(33%, -78%);
}
.typewriter p {
height: fit-content;
border-right: .15em solid rgb(0, 0, 0);
font-family: futura-pt;
white-space: nowrap;
overflow: hidden;
letter-spacing: 20px;
font-size: 100%;
}
.typewriter p:nth-child(1) {
width: 90%;
animation: type2 4s steps(40, end);
animation-fill-mode: forwards;
}
.typewriter p:nth-child(2) {
width: 90%;
opacity: 0;
animation: type2 4s steps(40, end);
animation-delay: 4s;
animation-fill-mode: forwards;
}
.typewriter p:nth-child(3) {
width: 90%;
opacity: 0;
animation: type2 4s steps(40, end);
animation-delay: 8s;
animation-fill-mode: forwards;
}
.typewriter p:nth-child(4) {
width: 90%;
opacity: 0;
animation: type2 5s steps(40, end), blink .5s step-end infinite alternate;
animation-delay: 12s;
animation-fill-mode: forwards;
}
#keyframes blink {
50% {
border-color: transparent;
}
}
#keyframes blink2 {
0% {
border-right: .15em solid rgb(0, 0, 0);
}
50% {
border-color: transparent;
}
100% {
border: none;
}
}
#keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid rgb(0, 0, 0);
}
100% {
border: none;
}
}
#keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid rgb(0, 0, 0);
}
100% {
opacity: 1;
border: none;
}
}
#keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<header>
<h1 class="home-title"><img src="images/logo.png" alt="Invisible" /></h1>
<div class="typewriter" id="typewriter">
<p>keep</p>
<p>your</p>
<p>eyes</p>
<p>open</p>
</div>
</header>
I have made a strap of hexagon shapes on my website that slowly animate the background color to have a "twinkle" effect. You can see it in action at https://taketwicedailey.com/. I made the hexagon shaped elements using a tutorial I found online. It involves making a rectangle element and then positioning the ::before and ::after options as rhombus shapes at the top and bottom of the rectangle element (If there is a better way, let me know, I am new to web building).
What I then wanted to do is have a forever looping animation of the group of hexagon shapes that changes the background color. Then I wanted to set this animation to start at different times for different elements based on an nth-of-type selector. I developed all of this using Google Chrome, on which it works beautifully with no issues, that you can verify yourself.
The problem comes when you use Firefox. It seems that the animation does not want to be inherited by the ::before and ::after options, which gives a bow-tie looking effect. This seems to have happened in a recent update in Firefox because this was not an issue a while ago. I have tried everything from defining the animation inside the ::before, ::after definition, to using !important flags, but the mechanism behind this apparent bug is far beyond my understanding here.
I included my CSS below, thanks in advance for any help.
.hex-group {
position: absolute;
top: 470px;
left: 60%;
width: 250px;
margin: 0px;
font-size: 0;
text-align: center;
z-index: -5;
overflow: visible;
}
.hex {
display: inline-block;
position: relative;
width: 76px;
height: 43.87862px;
margin: 21.93931px 2px 3.4641px;
z-index: -6;
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before, .hex:after {
content: '';
display: block;
position: absolute;
z-index: -7;
width: 53.74012px;
height: 53.74012px;
transform-origin: 0 0;
transform: scaleY(0.57735) rotate(-45deg);
background-color: inherit !important;
}
.hex:before {
top: 0;
}
.hex:after {
top: 43.87862px;
}
.hex:nth-of-type(4n) {
animation-delay: 0s;
}
.hex:nth-of-type(4n+1){
animation-delay: -5s;
}
.hex:nth-of-type(4n+2){
animation-delay: -10s;
}
#keyframes pulse {
0% {
background-color: var(--main-bg-color);
}
25% {
background-color: #55636e;
}
50% {
background-color: #444;
}
75%{
background-color: var(--main-bg-color);
}
}
I think that this is a legitimate Firefox bug, but for now I have found the following workaround. You can "over-specify" the animation to the ::before and ::after elements like so
.hex {
display: inline-block;
position: relative;
width: 76px;
height: 43.87862px;
margin: 21.93931px 2px 3.4641px;
z-index: -6;
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before, .hex:after {
content: '';
display: block;
position: absolute;
z-index: -5;
width: 53.74012px;
height: 53.74012px;
transform-origin: 0 0;
transform: scaleY(0.57735) rotate(-45deg);
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before {
top: 0;
}
.hex:after {
top: 43.87862px;
}
.hex:nth-of-type(4n),
.hex:nth-of-type(4n):before,
.hex:nth-of-type(4n):after {
animation-delay: 0s;
}
.hex:nth-of-type(4n+1),
.hex:nth-of-type(4n+1):before,
.hex:nth-of-type(4n+1):after {
animation-delay: -5s;
}
.hex:nth-of-type(4n+2),
.hex:nth-of-type(4n+2):before,
.hex:nth-of-type(4n+2):after {
animation-delay: -10s;
}
#keyframes pulse {
0% {
background-color: var(--main-bg-color);
}
25% {
background-color: #55636e;
}
50% {
background-color: #444;
}
75%{
background-color: var(--main-bg-color);
}
}
I am trying to change colour of button after playing animation for some time. What I have searched and found that, it needs to change a new frame. Here is my CSS:
.header-button {
font-size: 12px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .8);
color: #fbd3cc;
text-decoration: none;
font-weight: normal;
height: 30px;
border: 1px solid rgba(255, 255, 255, .4);
border-radius: 3px;
-webkit-border-radius: 3px;
display: inline;
background: #026890;
}
#keyframes fadeIn {
from {
opacity: 0;
}
}
.animate-flicker {
animation: fadeIn 0.5s infinite alternate;
animation-iteration-count: 10;
-moz-animation-name: changecolor;
}
#keyframes changecolor {
{
color: red;
}
}
<button class="header-button animate-flicker">Menue
</button>
Can some one tell me how i can change the button colour after playing animation for 5 times in css
You need to make both animations either:
In the same keyframes
#keyframes fadeInNColor {
from {
opacity: 0;
}
to {
color: red;
}
}
or call each of them from the same rule
animation: fadeIn 0.5s infinite alternate, changecolor 0.5s infinite alternate forwards;
.header-button {
font-size: 12px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .8);
color: #fbd3cc;
text-decoration: none;
font-weight: normal;
height: 30px;
border: 1px solid rgba(255, 255, 255, .4);
border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
background: #026890;
}
#keyframes fadeIn {
from {
opacity: 0;
}
}
.animate-flicker {
animation:
fadeIn 0.5s infinite alternate, /* first animation*/
changecolor 0.5s infinite alternate forwards;/* second animation freezed */
animation-iteration-count: 5;
}
#keyframes changecolor {
to {
color: red;
}
}
<button class="header-button animate-flicker">Menue
</button>
you can add a span into the button tag and apply the color change to the span by delaying it by a few seconds to finish the nimation
Hope this is what you are looking for:
#keyframes changecolor
{
to {background:red;}
}
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 have a progress element like so:
body {
background: grey;
}
progress[value] {
-webkit-appearance: none;
appearance: none;
height: 25px;
width: 95%;
position: relative;
top: 10px;
right: 50%;
left: 2.5%;
}
progress[value]::-webkit-progress-bar {
background-color: rgba(255,255,255,0.2);
border-radius: 50px;
border: solid;
border-width: 0px;
border-color: rgba(255,255,255,0.1);
}
progress[value]::-webkit-progress-value {
background-image: repeating-linear-gradient(
45deg,
#fff,
#fff 10px,
#f9f9f9 10px,
#f9f9f9 20px
);
border-radius: 50px;
-moz-animation-name: move;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease;
-moz-animation-duration: 0.4s;
-moz-animation-delay: 1.5s;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: move;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 0.4s;
animation-delay: 1.5s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 1.5s;
animation-play-state: running;
}
#keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
<progress max="100" value="80"></progress>
And I have used CSS animations, however for some reason they do not work. I want the stripes to move horizontally, infinitely. Is there any reason to why this doesn't work?
Note - <progress> is not well supported by IE. See this for a complete guide to make it work across browsers. Below demo is the simplified animation without <progress> element.
body {
background-color: #666;
}
div {
background-color: #999;
border-radius: 30px;
height: 30px;
}
div > div {
background-image: repeating-linear-gradient(-45deg, #fff, #fff 10px, #ccc 10px, #ccc 20px);
background-size: 28px 30px;
animation: progress 2s linear infinite;
width: 50%;
}
#keyframes progress {
0% { background-position: 0 0; }
100% { background-position: 28px 0; }
}
<div><div></div></div>