This is the only thing I could think of.
#div {
height: 20px;
width: 20px;
background-color: black;
transition: 1s;
}
#div:hover {
background-color: red;
}
#div:hover {
transition-delay: 2s;
background-color: blue;
}
<div id="div">
</div>
It'll instead ignore the first #div:hover
EDIT:
Alright this seemed to work.
#div:hover {
animation: fade 3s forwards;
}
#keyframes fade {
0%, 66% {background-color: red}
100% {background-color: blue}
}
but how do I make it fade out in reverse?
You can achieve with animation.
#div {
height: 20px;
width: 20px;
background-color: black;
}
#div:hover {
background-color: blue;
animation: delayed 4s forwards;
}
#keyframes delayed {
0% {
background-color: red;
}
50% {
background-color: red;
}
51% {
background-color: blue;
}
100% {
background-color: blue;
}
}
<div id="div">
</div>
The second :hover is overwriting the first and the transition-delay will always be 2 seconds.
I guess you'll need to create an animation for that:
#div {
height: 20px;
width: 20px;
background-color: black;
}
#div:hover {
animation: redtoblue 3s;
animation-fill-mode: forwards;
}
#keyframes redtoblue{
0%, 65.9%{
background-color: red;
}
66%, 100%{
background-color: blue;
}
}
<div id="div">
</div>
Related
This is a relatively simple question but I can't seem to see what I'm doing wrong here. I just want the ball to change from red, to blue, to yellow at the 0%, %50, and %100 mark. Currently I'm not seeing any changes.
Thanks for your help,
Anna
#ball {
background-color: red;
height: 50px;
width:50px;
border-radius: 50%;
animation-name: ball;
animation-duration: 4s;
#keyframes ball{
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
}
<html>
<body>
<div id="ball">
</div>
</body>
</html>
Move #keyframes out of your ball styles (unless you use a CSS preprocessor like SASS...)
#ball {
background-color: red;
height: 50px;
width: 50px;
border-radius: 50%;
animation-name: ball;
animation-duration: 4s;
}
#keyframes ball {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
<div id="ball"></div>
Whilst using SCSS instead, you can: jsFiddle example
I have been trying to create a simple image slider showcasing four images for a website. I have managed to create the slideshow, however the transition between each images is really fast and I want a bit of a fade in effect so that it's smoother. A lot of the questions on here already suggest using jQuery but I am trying to do it with just CSS. I've also explored the animate.css but couldn't get it to work. Appreciate any/all help given. Thanks :)
Heres the code so far:
HTML
<div class="slider">
<div class="feature">
</div>
<div class="overlay">
</div>
</div>
and the CSS
.feature {
animation: slide 3s;
}
.slider {
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 80vh;
animation: slide 10s infinite;
}
.overlay {
color: #fff;
width: 100%;
height: 80vh;
background-color: rgba(0, 0, 0, 0.5);
}
#keyframes slide {
0%{
background-image: url(../resources/feature/Feature1.jpg);
}
25%{
background-image: url(../resources/feature/Feature1.jpg);
}
25.1%{
background-image: url(../resources/feature/Feature2.jpg);
}
50%{
background-image: url(../resources/feature/Feature2.jpg);
}
50.01%{
background-image: url(../resources/feature/Feature3.jpg);
}
75%{
background-image: url(../resources/feature/Feature3.jpg);
}
75.01%{
background-image: url(../resources/feature/Feature4.jpg);
}
100%{
background-image: url(../resources/feature/Feature4.jpg);
}
}
You have to set the opacity and transition of the "sliders" to get the effect.
.feature {
}
.slider {
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 80vh;
transition: all .2s ease-in-out;
animation: slide 10s infinite;
}
.overlay {
color: #fff;
width: 100%;
height: 80vh;
background-color: rgba(0, 0, 0, 0.5);
transition: all .2s ease-in-out;
}
#keyframes slide {
0%{
opacity: 0;
background-color: red;
}
20%{
opacity: 1;
background-color: red;
}
25%{
opacity: 0;
background-color: red;
}
25.1%{
opacity: 0;
background-color: blue;
}
45%{
opacity: 1;
background-color: blue;
}
50%{
opacity: 0;
background-color: blue;
}
50.01%{
opacity: 0;
background-color: yellow;
}
70%{
opacity: 1;
background-color: yellow;
}
75%{
opacity: 0;
background-color: yellow;
}
75.01%{
opacity: 0;
background-color: green;
}
95%{
opacity: 1;
background-color: green;
}
100%{
opacity: 0;
background-color: green;
}
}
<div class="slider">
<div class="feature">
</div>
<div class="overlay">
</div>
</div>
Just change the line
animation: slide 10s infinite;
to
animation: slide 20s infinite;
and it would give some time for transition.
you can try to manege animation Opacity and no any other way to create this slider will show & transition.
#keyframes slide {
0%{
background-image: url(https://image.flaticon.com/sprites/new_packs/178146-business-strategy.png);
}
48%{ opacity:0;
}
50%{
opacity:1;
background-image: url(https://images-eu.ssl-images-amazon.com/images/I/51TxXo0RLgL.png);
}
97%{ opacity:1;
98%{ opacity:0;
100%{
opacity:1;
background-image: url(https://image.flaticon.com/sprites/new_packs/178146-business-strategy.png);
}
}
https://jsfiddle.net/m4tsudc7/21/
I have this loader working fine.
CSS:
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div *ngIf="somevalue" class="loader"></div>
Now I need put some text in center
but my try not working. How Can I let my loader like in second image? I dont want install more external components, md-progress-loader, md-circle...etc.. TRY IT
A very simple solution is to just place the text into another div and position it accordingly - something like
<div class="container">
<div class="loader"></div>
<div class="description">Text</div>
</div>
and
.description
{
position: absolute;
top:0;
left:0;
line-height:150px;
width:152px;
text-align:center;
}
.container
{
position:relative;
}
This counters the rotation and provides a roughly sane box in which other elements can be placed.
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader div {
display: block;
animation: spin 2s linear infinite reverse;
position: relative;
height: 100%;
}
.loader div span {
display: inline-block;
text-align: center;
}
<div *ngIf="somevalue" class="loader"><div><span>testing lots of text in this text box</span></div></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).
I know it is possible to draw and animate arcs in SVG and canvas. However, is it possible in CSS?
I have created an arc using the following method:
.arc{
width:150px;
height:400px;
border-radius:50%;
border-right:1px solid black;
border-left:1px solid black;
border-top:1px solid black;
border-bottom:1px solid white;
}
But, how can I animate this? The only way I can think of is having a pure white div over it and sliding that div to the right gradually revealing the arc. Is there a better way?
Here is working demo with minimum of hard-coded variables. This works based on animated circle halves:
.circle {
display: inline-flex;
overflow: hidden;
}
.circle__half {
height: 200px;
width: 100px;
position: relative;
overflow: hidden;
}
.circle__half:before {
height: inherit;
width: inherit;
position: absolute;
content: "";
border-radius: 100px 0 0 100px;
background-color: lime;
transform-origin: 100% 50%;
/* hidden by default */
transform: rotate(180deg);
opacity: 0.65;
animation-name: rotate-circle-half;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.circle__half--right {
transform: scale(-1, -1);
}
.circle .circle__half--right:before {
animation-name: rotate-circle-half--right;
}
/* show half of circle half of the time */
#keyframes rotate-circle-half {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes rotate-circle-half--right {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="circle">
<div class="circle__half"></div>
<div class="circle__half circle__half--right"></div>
</div>
Also the same look as iConnor's answer but doesn't have drawback of hardcoded background-color:
*,
*:before,
*:after {
box-sizing: border-box;
}
.circle {
display: inline-flex;
overflow: hidden;
}
.circle__half {
height: 200px;
width: 100px;
position: relative;
overflow: hidden;
}
.circle__half:before {
height: inherit;
width: inherit;
position: absolute;
content: "";
border-radius: 100px 0 0 100px;
border: 10px solid #00507c;
border-right-color: transparent;
background-color: #0087cf;
transform-origin: 100% 50%;
/* hidden by default */
transform: rotate(180deg);
opacity: 0.65;
animation-name: rotate-circle-half;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.circle__half--right {
transform: scale(-1, -1);
}
.circle .circle__half--right:before {
animation-name: rotate-circle-half--right;
}
/* show half of circle half of the time */
#keyframes rotate-circle-half {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes rotate-circle-half--right {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="circle">
<div class="circle__half"></div>
<div class="circle__half circle__half--right"></div>
</div>
If you need sole CSS3, then you can set a width+height, set border-radius to 100%, disable the extra borders (use only 1 or 2) and add some good pixels to it.
Then you can animate using animate: time animation ease timingFunction;
Declare the animation itself using #-prefix-keyframes { . . . } (Eh yea, looks like most browser engines require prefix for this one, chrome does :S)
I think I might have something close to what you mean:
.qLoader2 {
border: 4px solid blue;
width: 10vw;
height: 10vw;
width: 72px;
height: 72px;
position: absolute;
top: 12vh;
right: 45vw;
left: 45vw;
background: white;
opacity: 0.45;
border-right: none;
border-top: none;
border-left: none;
z-index: 2000;
background-color: transparent;
border-radius: 100%;
transform: rotateZ(0);
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
/* #-moz-keyframes spin { . . . } */
/* #-ms-keyframes spin { . . . } */
/* #-o-keyframes spin { . . . } */
#-webkit-keyframes spin {
from {
transform: rotateZ(0deg) scale(1);
}
50% {
transform: rotateZ(540deg) scale(0.9);
border-color: #0099ff;
}
to {
transform: rotateZ(1080deg) scale(1);
}
}
#keyframes spin {
from {
transform: rotateZ(0deg) scale(1);
}
50% {
transform: rotateZ(540deg) scale(0.9);
border-color: #0099ff;
}
to {
transform: rotateZ(1080deg) scale(1);
}
}
<div class="qLoader2"></div>
On JSFiddle
Feel free to use and modify.
Alternatively you could check something with SVG it's fairly decent as well and supported by most nowadays browsers.
EDIT: Using two arcs, you can have the animation draw cleanly from left-to-right AND have the background show through:
http://jsfiddle.net/sPv4A/6/
Vendor prefixes not included for CSS:
.arcContain {
width: 150px;
height: 400px;
position: relative;
margin: 20px;
}
.arc {
width: 150px;
height: 400px;
border-radius: 50%;
border: 2px solid black;
border-bottom: 2px solid transparent;
position: absolute;
top: 0;
right: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.archideLeft .arc {
top: auto;
bottom: 0;
right: auto;
left: 0;
}
.archide {
width: 50%;
height: 0%;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
animation: appear 1.2s ease-in 1.2s forwards;
}
.archideLeft {
top: auto;
bottom: 0;
right: auto;
left: 0;
animation: appear 1.2s ease-out forwards;
}
#keyframes appear {
to {
height: 100%;
}
}
<div class="arcContain">
<div class="archide archideLeft">
<div class="arc"></div>
</div>
<div class="archide">
<div class="arc"></div>
</div>
</div>
OLD ANSWER: Maybe using two child divs to cover it up, and then have them shrink away to reveal it:
.arc {
width: 150px;
height: 400px;
border-radius: 50%;
border-right: 1px solid black;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid white;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.arcInner {
background: white;
height: 402px;
width: 77px;
position: absolute;
}
.arcLeft {
top: -2px;
left: -2px;
-webkit-transition: height 2s linear;
-moz-transition: height 2s linear;
-ms-transition: height 2s linear;
-o-transition: height 2s linear;
transition: height 2s linear;
}
.arcRight {
bottom: 0;
right: -2px;
-webkit-transition: height 2s 2s linear;
-moz-transition: height 2s 2s linear;
-ms-transition: height 2s 2s linear;
-o-transition: height 2s 2s linear;
transition: height 2s 2s linear;
}
.appear .arcInner {
height: 0;
}
<div class="arc">
<div class="arcInner arcLeft"></div>
<div class="arcInner arcRight"></div>
</div>
As Per Chris B's suggestion on the original question, the answer is to contain the arc in another div and then animate the width of the container:
http://jsfiddle.net/AZb3X/
CSS:
body{
background:orange;
}
.arc{
width:150px;
height:400px;
border-radius:50%;
border-right:1px solid black;
border-left:1px solid black;
border-top:1px solid black;
border-bottom:1px solid white;
float:left;
}
.hider{
width:0px;
overflow:hidden;
-webkit-animation:unhide 12s;
}
#-webkit-keyframes unhide{
100%{width:400px}
}
HTML:
<div class='hider'>
<div class="arc"></div>
</div>
I may be a little late, but I think using two "hiders" and translating one up and one down will look a little better.
Working Example
<div class="wrap">
<div class="arc"></div>
</div>
body {
background:orange;
}
.wrap {
position:absolute;
height:400px;
width:170px;
overflow: hidden;
}
.arc {
position:absolute;
width:150px;
height:400px;
margin:10px;
border-radius:50%;
border-right:1px solid black;
border-left:1px solid black;
border-top:1px solid black;
border-bottom:1px solid transparent;
}
.arc:before {
content:"";
position:absolute;
left:-1px;
top:-2px;
background: orange;
width:76px;
height:375px;
animation:unhide1 5s linear both;
}
.arc:after {
content:"";
position:absolute;
left:75px;
top:-2px;
background: orange;
float: right;
width:76px;
height:375px;
animation: unhide2 5s linear 5s both;
}
#keyframes unhide1 {
100% {
transform: translatey(-375px);
}
}
#keyframes unhide2 {
100% {
transform: translatey(375px);
}
}