I can't make transition on 'color' work because this property is used in a startup animation. However 'background-color' behaves how it should.
This is my CSS:
div{
font-size: 7rem;
animation-name: appearance;
animation-duration: 2s;
animation-fill-mode: forwards;
transition: background-color 2s, color 2s;
}
div:hover{
background-color: black;
color: white;
animation-fill-mode: none;
}
#keyframes appearance{
0%{
color: white;
}
100%{
color: black;
}
}
JSFiddle that demostrates what I mean
Any tips to make transition work?
You need to wrap it into another div/section. You can find the working snippet below.
I have wrapped it into a section, and given the page load animation to the section, while the hover effect to the div.
section {
animation-name: appearance;
animation-duration: 2s;
animation-fill-mode: forwards;
color: black;
}
div {
font-size: 7rem;
transition: all 2s ease;
}
div:hover {
background-color: black;
color: white;
animation-fill-mode: none;
}
#keyframes appearance {
0% {
color: white;
}
100% {
color: black;
}
}
<section>
<div>
text
</div>
</section>
Related
This is auto fade out after hover css animation
I'm trying to show a notification on video play button. The button click actually clicked for video play. I want to show a div with its content with the play icon. However, I would like to fade out the play icon, lets say after 5 seconds . I would like to achieve it using CSS. Below is my attempt. Please inform me if better solution here.
Here is the live Demo
body {
font-size: 50%;
font-style: Arial;
}
.animation-box {
width: 75%;
height: 27.5rem;
background-color: blue;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.animation-container {
width: 1000rem;
height: 30rem;
}
.first-text {
font-size: 4rem;
position: absolute;
left: 2.5rem;
top: 5rem;
color: white;
-webkit-animation: fadeOut 2s forwards;
animation: fadeOut 2s forwards;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.first-text:hover {
-webkit-animation: fadeIn 0s forwards;
animation: fadeIn 0s forwards;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#-webkit-keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
#keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
<section class="animation-box">
<h1 class="first-text">This is auto fade out after hover </h1>
</section>
You can achieve this with just transition :
body {
font-size: 50%;
font-style: Arial;
}
.animation-box {
width: 75%;
height: 27.5rem;
background-color: blue;
margin: 0 auto;
overflow: hidden;
position: relative;
}
h1{
opacity:0;
transition: opacity 250ms 5s ease;
}
.animation-box:hover h1{
opacity:1;
transition-delay: 250ms;
}
<section class="animation-box">
<h1 class="first-text">This is auto fade ou1t after hover </h1>
</section>
.Class {
transition: all 0.5s;
color: #ff0;
margin: 50px;
font-size: 28px;
cursor: pointer;
}
.Class:hover {
color: #00f;
}
<p class="Class"> This is me </p>
Use transition:0.5s ease with opacity:0
<section class="animation-box">
<h1 class="first-text">This is auto fade ou1t after hover </h1>
</section>
.animation-box{
transition: 0.5s ease;
}
.animation-box:hover{
opacity:0;
transition: 0.5s ease;
}
I am using CSS keyframes to animate two separate text.
The problem which I am facing is that the text of first span element ("first text") on 100% animation completion appears suddenly instead of second span element text fliping after the completion of "first text".
.c--anim-btn {
height: 40px;
font: normal normal 700 1em/4em Arial, sans-serif;
overflow: hidden;
width: 200px;
background-color: #ffffff;
}
.c--anim-btn span {
color: black;
text-decoration: none;
text-align: center;
display: block;
}
.c-anim-btn {
animation: rotateWord 3s linear infinite 0s;
}
.c--anim-btn span:nth-child(2) {
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#keyframes rotateWord {
0% {
margin-bottom: 0rem;
}
25% {
margin-top: 0rem;
}
40% {
margin-top: -4rem;
}
100% {
margin-top: -4rem;
}
}
<div class="c--anim-btn">
<span class="c-anim-btn">First Text</span>
<span>Second Text</span>
</div>
jsFiddle
Try to change the css property to the following, in order to keep the final state of the animation:
.c-anim-btn{
animation: rotateWord 3s forwards;
-webkit-animation: rotateWord 3.0s forwards
}
I have changed a little your keyframes, may be this is what you want
.c--anim-btn {
height: 40px;
font: normal normal 700 1em/4em Arial,sans-serif;
overflow: hidden;
width: 200px;
background-color: #ffffff;
}
.c--anim-btn span {
color: black;
text-decoration: none;
text-align: center;
display: block;
}
.c-anim-btn{
animation: rotateWord 3s linear infinite 0s;
}
.c--anim-btn span:nth-child(2){
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#keyframes rotateWord {
0%, 25% {
margin-top: 0rem;
}
40%, 75% {
margin-top: -4rem;
}
100% {
margin-top: 0rem;
}
}
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
I have an ul. With javascript I add the li's to it. I need the added li with background-color #E4F3D6 then 10 seconds later change to #DDD as final color.
I know this is possible with animation and transition-delay but I don't figure out how.
I wrote this but doesn't work properly:
#-webkit-keyframes change-color {
0% {
background-color: #E4F3D6;
/*-webkit-transition-delay: 5s;*/
}
100% { background-color: transparent; }
}
#-moz-keyframes change-color {
0% {
background-color: #E4F3D6;
/*-moz-transition-delay: 5s;*/
}
100% { background-color: transparent; }
}
#keyframes change-color {
0% {
background-color: #E4F3D6;
/*transition-delay: 5s;*/
}
100% { background-color: transparent; }
}
.test {
height: 25px;
background-color: #E4F3D6;
-webkit-animation: change-color 2s ease;
-moz-animation: change-color 2s ease;
animation: change-color 2s ease;
}
Here a demo: https://jsfiddle.net/junihh/a657pd6q/4/
Anyone help me, please.
Set the transition-delay property in the CSS for the element itself:
.test {
height: 25px;
background-color: #E4F3D6;
-webkit-animation: change-color 2s ease 5s forwards;
-moz-animation: change-color 2s ease 5s forwards;
animation: change-color 2s ease 5s forwards;
}
The above uses the shorthand alternative for the animation property:
animation: <animation-name> <animation-duration> <animation-type> <animation-duration> <animation-fill-mode>
The animation-delay property does precisely what its name suggests, it delays the start of the animation by the value specified (here 5s, five seconds); the animation-fill-mode property causes the final values of the animation to persist once the animation has completed:
document.getElementById('add').addEventListener('click', function() {
var li = document.createElement('li');
li.innerHTML = '<div class="test"></div>';
document.getElementById('container').appendChild(li);
}, false);
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
#container {
width: 200px;
margin: 20px auto 0;
padding: 15px;
background-color: #FFF;
border: solid 1px #DDD;
}
#container li {
background-color: #DDD;
margin-bottom: 4px;
}
#container li:last-child {
margin-bottom: 0;
}
.button-box {
margin: 20px auto 0;
width: 100px;
}
#add {
width: 100%;
padding: 10px 0;
background-color: #666;
cursor: pointer;
font-size: 14px;
color: #FFF;
}
#add:active {
background-color: #333;
}
#-webkit-keyframes change-color {
0% {
background-color: #E4F3D6;
}
100% {
background-color: #F90;
}
}
#-moz-keyframes change-color {
0% {
background-color: #E4F3D6;
}
100% {
background-color: #F90;
}
}
#keyframes change-color {
0% {
background-color: #E4F3D6;
}
100% {
background-color: #F90;
}
}
.test {
height: 25px;
background-color: #E4F3D6;
-webkit-animation: change-color 2s ease 5s forwards;
-moz-animation: change-color 2s ease 5s forwards;
animation: change-color 2s ease 5s forwards;
}
<ul id="container">
<!-- li's -->
</ul>
<div class="button-box">
<button type="button" id="add">Add row</button>
</div>
JS Fiddle demo.
Note that, in the demo, I've used a final colour of #f90 instead of #ddd simply to make the animation more obvious (the difference between the start and end colours, otherwise, are easy to miss).
Hello i am using css3 to animate place holder i figured out to run this on webkit navigators but firefox and ie the animation doesn't work and i think the problem is #keyframes please guys any solution guys ?
input::-moz-placeholder {
color: #8D8D8D;
}
input::-webkit-input-placeholder {
color: #8D8D8D;
}
input:-ms-input-placeholder {
color: #8D8D8D;
}
input:focus::-moz-placeholder {
animation-duration: 0.4s;
animation-name: slidein;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 0.1s;
}
input:focus::-webkit-input-placeholder {
-webkit-animation-duration: 0.4s;
-webkit-animation-name: slidein;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0.1s;
}
input:focus:-ms-input-placeholder {
opacity: 0;
}
input {
color: black;
padding-left: 0px;
padding-right: 10px;
}
#-webkit-keyframes slidein {
from {
opacity: 1;
padding-left: 0px;
}
to {
opacity: 0;
padding-left: 10px;
}
}
#keyframes slidein {
from {
opacity: 1;
padding-left: 0px;
padding-right: 10px;
}
to {
opacity: 0;
padding-left: 10px;
padding-right: 0px;
}
}
this is live demo http://jsfiddle.net/Cd8MG/
you need #-ms-keyframes, #-moz-keyframes, #-webkit-keyframes, and #keyframes to cover all of your bases. Yes, your code will be 10 miles long.
Ok My final conclusion is :
No one seems to have noticed, but in Firefox the behavior of the placeholder attribute is to leave the text until the user begins typing, at least in the most recent versions. Webkit solutions (or should I say -webkit solutions) to Webkit problems don’t seem to last long these days.
I want to animate borders of an element using CSS3, whether it's in hover state or normal state. Can someone provide me a code snippet for this or can guide?
I can do this using jQuery but looking for some pure CSS3 solution.
You can use a CSS3 transition for this. Have a look at this example:
http://jsfiddle.net/ujDkf/1/
Here is the main code:
#box {
position : relative;
width : 100px;
height : 100px;
background-color : gray;
border : 5px solid black;
-webkit-transition : border 500ms ease-out;
-moz-transition : border 500ms ease-out;
-o-transition : border 500ms ease-out;
transition : border 500ms ease-out;
}
#box:hover {
border : 10px solid red;
}
You can try this also...
button {
background: none;
border: 0;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
vertical-align: middle;
position: relative;
}
button::before, button::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.draw {
-webkit-transition: color 0.25s;
transition: color 0.25s;
}
.draw::before, .draw::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
.draw::before {
top: 0;
left: 0;
}
.draw::after {
bottom: 0;
right: 0;
}
.draw:hover {
color: #60daaa;
}
.draw:hover::before, .draw:hover::after {
width: 100%;
height: 100%;
}
.draw:hover::before {
border-top-color: #60daaa;
border-right-color: #60daaa;
-webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
-webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
<section class="buttons">
<button class="draw">Draw</button>
</section>
If you need the transition to run infinitely, try the below example:
#box {
position: relative;
width: 100px;
height: 100px;
background-color: gray;
border: 5px solid black;
display: block;
}
#box:hover {
border-color: red;
animation-name: flash_border;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: flash_border;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: flash_border;
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
#keyframes flash_border {
0% {
border-color: red;
}
50% {
border-color: black;
}
100% {
border-color: red;
}
}
#-webkit-keyframes flash_border {
0% {
border-color: red;
}
50% {
border-color: black;
}
100% {
border-color: red;
}
}
#-moz-keyframes flash_border {
0% {
border-color: red;
}
50% {
border-color: black;
}
100% {
border-color: red;
}
}
<div id="box">roll over me</div>
A bit late to this one but...
This is what I do:
.class {
color: tomato;
border: 10px solid currentColor;
transition: color 250ms linear;
// not part of solution just layout
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
text-transform: uppercase;
}
.class:hover {
color: rebeccapurple;
}
<div class='class' >color way</div>