I want to perform transition property to show and hide the div without the involvement of JavaScript. I used the following code:
div {
background-color: rgb(238, 190, 118);
height: 200px;
border: 2px solid rgb(255, 230, 0);
font-size: 50px;
text-align: center;
animation: hide_div 5s forwards;
}
#keyframes hide_div {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div>
Hide Div
</div>
this is done by animation property. when the given code is executed div is hidden after 5s but there is no way to show it again without refreshing the browser.
Does anyone have an idea how it will be done? let me know, please.
If you want it to show automatically. Use alternate infinite on animate css prop.
div {
background-color: rgb(238, 190, 118);
height: 200px;
border: 2px solid rgb(255, 230, 0);
font-size: 50px;
text-align: center;
animation: hide_div 5s alternate infinite;
}
#keyframes hide_div {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div>
Hide Div
</div>
If you a user to be able to control when the div is shown you could use a checkbox and the next sibling combinator "+" combined with transition (rather than animation).
div {
background-color: rgb(238, 190, 118);
height: 200px;
border: 2px solid rgb(255, 230, 0);
font-size: 50px;
text-align: center;
transition: opacity 5s;
opacity: 0;
}
input:checked + div {
opacity: 1
}
<label for="cb">Show The Div</label><input id="cb" type="checkbox">
<div>
Hide Div
</div>
You can use infinite instead of forwards:
animation: hide_div 5s infinite;
That should be enough for your request :)
div {
background-color: rgb(238, 190, 118);
height: 200px;
border: 2px solid rgb(255, 230, 0);
font-size: 50px;
text-align: center;
animation: hide_div 5s infinite;
}
#keyframes hide_div {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div>
Hide Div
</div>
Related
I use this code to make the text look like it is being written, on the moment when the user enters the website.
I want to continue to show the animation of writing when finished, that's when a want to hide the vertical line (cursor).
body{background:blue;}
.line {
width: 4;
top: 50%;
margin: auto;
border-right: 2px solid rgba(255, 255, 255, 0.75);
text-align: center;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
.anim-typewriter {
animation: typewriter 3s steps(40) 1s 1 normal both,
blinkTextCussor 500ms steps(40) infinite normal;
}
#keyframes typewriter {
from {
width: 0;
}
to {
width: 9em;
}
}
#media(max-width: 768px) {
#keyframes typewriter {
from {
width: 0;
}
to {
width: 9em;
}
}
}
#keyframes blinkTextCussor {
from {
border-right-color: rgba(255, 255, 255, 0.75);
}
to {
border-right-color: transparent;
}
}
<div class="line anim-typewriter">Your Best Automation</div>
If you make the blinking cursor run for just a bit more than the text 'reveal' and also give it animation-fill-mode: forwards, when it has finished it will stick at the opacity: 0 it gathered from the end of its animation.
body{background:blue;}
.line {
width: 4;
top: 50%;
margin: auto;
border-right: 2px solid rgba(255, 255, 255, 0.75);
text-align: center;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
.anim-typewriter {
animation: typewriter 3s steps(40) 1s 1 normal both,
blinkTextCussor 500ms steps(40) 4s forwards;
}
#keyframes typewriter {
from {
width: 0;
}
to {
width: 9em;
}
}
#media(max-width: 768px) {
#keyframes typewriter {
from {
width: 0;
}
to {
width: 9em;
}
}
}
#keyframes blinkTextCussor {
from {
border-right-color: rgba(255, 255, 255, 0.75);
}
to {
border-right-color: transparent;
}
}
*i want to continue show the animation of writing when the first part finish thats why a want to hide the vertical line *
<div class="line anim-typewriter">Your Best Automation</div>
You did not specify, if you can (want to) use javascript but you can set event listener for the animationend and let the vertical line disappear when it triggers (or stop the animation first and add nice fade-out effect).
const typewriter = document.querySelector(".anim-typewriter");
console.log(typewriter)
typewriter.addEventListener("animationend", function() {
setInterval(function() {
typewriter.style.border = "0px";
}, 600);
}, false);
body {
background: blue;
}
.line {
width: 4;
top: 50%;
margin: auto;
border-right: 2px solid rgba(255, 255, 255, 0.75);
text-align: center;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
.anim-typewriter {
animation: typewriter 3s steps(40) 1s 1 normal both, blinkTextCussor 500ms steps(40) infinite normal;
}
#keyframes typewriter {
from {
width: 0;
}
to {
width: 9em;
}
}
#media(max-width: 768px) {
#keyframes typewriter {
from {
width: 0;
}
to {
width: 9em;
}
}
}
#keyframes blinkTextCussor {
from {
border-right-color: rgba(255, 255, 255, 0.75);
}
to {
border-right-color: transparent;
}
}
<div class="line anim-typewriter">Your Best Automation</div>
This question already has answers here:
How to have css3 animation to loop forever
(3 answers)
Closed 2 years ago.
Having this html/css snippet:
.triangle-four {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 250px solid rgb(20, 97, 27);
margin-top: -120px;
animation-name: example;
animation-duration: 4s;
}
#keyframes example {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
<div class="triangle-four"></div>
I want to make it run infinitely and tried to do it like this:
animation-duration: 4s infinite;
It doesn't work, the animation is not working anymore even thought this is what is recommended to do on w3schools.
Any ideas?
I remove animation-name: example; animation-duration: 4s; and add this animation: example 5s infinite; it will fix your problem.
another solution it just to add this without removing anything :
animation-iteration-count: infinite;
.triangle-four {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 250px solid rgb(20, 97, 27);
margin-top: -120px;
animation: example 5s infinite;
}
#keyframes example {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
<div class="triangle-four"></div>
On the link provided, it says that the animation property is a shorthand for multiple animation properties.
You have to specify the animation-name and the animation-duration. You may then add the animation-iteration-count.
.triangle-four {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 250px solid rgb(20, 97, 27);
margin-top: -120px;
animation: 4s example infinite;
}
#keyframes example {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
<div class="triangle-four"></div>
just add
animation-iteration-count: infinite;
it will solve the issue
Adding the following css should fix it:
animation-duration: 4s;
animation-iteration-count: infinite;
.triangle-four {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 250px solid rgb(20, 97, 27);
margin-top: -120px;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#keyframes example {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
<div class="triangle-four"></div>
Of course, the end of the animation "jumps" to red, but that is the effect described by your animation. If that was not intended, you can simply add this css:
animation-direction: alternate;
How can I make my button decrease size on hover as per this pen here looking at the pulse button?
My CSS looks like this:
.pulse {
margin:100px;
display: block;
width: 170px;
height: 22px;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204,169,44, 0.4);
}
.pulse:hover {
animation: pulse 2s infinite;
}
#keyframes pulse {
0%{
width: 170px;
}
50%{
width: 120px;
}
}
HTML:
<button class="pulse">Button styling</button>
When I hover, the width decreases, but the effect is not the same as the reference pen which gets smaller on all sides, if that's the correct explanation.
My pen can be found here
try to add transform to get the animation
.pulse {
margin: 100px;
display: block;
width: 170px;
height: 22px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s infinite;
}
.pulse:hover {
animation: none;
}
#keyframes pulse {
0% {
transform: scale(1);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
<button class="pulse">Button styling</button>
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;}
}
Can I flash a div using only CSS? I would like this div to flash two colors.
.chat-window .msg-container-base .notification-message-unread{
float: right;
font-size: 10px;
color: #666;
background: white;
padding-left: 10px;
}
Here you go:
.notification-message-unread {
float: right;
font-size: 10px;
color: #666;
background: white;
padding-left: 10px;
display: block;
position: relative;
width: 200px;
height: 200px;
background-color: red;
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% {
background-color: blue;
}
}
<div class="notification-message-unread"></div>
For this you can use CSS keyframe animations.
.box {
height: 500px;
width: 500px;
animation: animationFrames 5s infinite;
}
#keyframes animationFrames{
0% {
background-color: blue;
}
15% {
background-color: red;
}
30% {
background-color: orange;
}
45% {
background-color: purple;
}
60% {
background-color: green;
}
75% {
background-color: pink;
}
100% {
background-color: black;
}
}
<div class="box"></div>
In the .box class I'm using the animation property to link to an animation keyframe called animationFrames. I'm also defining how long I want this animation to play for, in the example above it's 5s and set to infinite so it repeats forever. The keyframe portion sets what CSS you want to apply to the animation at what percent in the animation, for example at 15% of 5 seconds it will turn red.
You can learn more about CSS keyframe animations here and here.
As per your specific example this code should work (I added a height property just so you could see it)
.chat-window {
float: right;
font-size: 10px;
color: #666;
background: white;
padding-left: 10px;
animation: animationFrames 2s infinite;
height: 500px;
}
#keyframes animationFrames{
50% {
background-color: orange;
}
}
<div class="chat-window"></div>