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;}
}
Related
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>
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>
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>
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 two div elements that I want both to puslate (CSS animation) if mouse hovers on any one of them. There a simple code following. In my page they are not next each other. The above code does not works.
jsfiddle: http://jsfiddle.net/GcyqL/1/
CSS:
#counter {
width:120px;
height:25px;
text-align: center;
border-style: solid;
border-width: 1px;
background-color: rgb(142, 197, 255);
font-weight: bold;
}
#mem_val {
width:120px;
height:25px;
text-align: center;
border-style: solid;
border-width: 1px;
background-color: rgb(142, 197, 255);
font-weight: bold;
}
div.intro:hover{
-webkit-animation: pulsate 1s infinite alternate;
-moz-animation: pulsate 1s infinite alternate;
-animation: pulsate 1s infinite alternate;
text-shadow: 0 0 8px #ccc;
}
#-webkit-keyframes pulsate {
from { box-shadow: 0 0 10px #333; }
to { box-shadow: 0 0 20px #c00; }
}
#-moz-keyframes pulsate {
from { box-shadow: 0 0 10px #333; }
to { box-shadow: 0 0 20px #c00; }
}
#keyframes pulsate {
from { box-shadow: 0 0 10px #333; }
to { box-shadow: 0 0 20px #c00; }
}
HTML
<div id="mem_val" class="intro" >mem_val</div><br><br>
<div id="counter" class="intro">counter</div><br><br>
If you want to do it only with CSS, you can add them both to the same container and use the container's hover selector.
Notice that this solution will make the hover animation even if the container is being hovered outside of these two elements. You can walk around this issue with a little trick that'll make the container stay "invisible", although it might be a bit non-flexible.
jsFiddle Demo
#container {
width:0;
height:0;
overflow: visible;
}
/* Old selector: div.intro:hover */
#container:hover div.intro {
-webkit-animation: pulsate 1s infinite alternate;
-moz-animation: pulsate 1s infinite alternate;
-animation: pulsate 1s infinite alternate;
text-shadow: 0 0 8px #ccc;
}
Add jQuery and here's a solution, DEMO
$(document).ready(function(){
$('.pulsate').hover(
function(){
$('.pulsate').addClass('intro');
},
function(){
$('.pulsate').removeClass('intro');
}
);
});
Just put them inside a container with display:inline; and then use
#container:hover div {
//plusate...
}
Demo: http://jsfiddle.net/GcyqL/8/
Pure css.