I would like to add a FadeIn with CSS on #loader before my animation but it doesn't work.
You can test it here : http://codepen.io/AntoinePlu/pen/yLvdi
Any idea why ?
There is my HTML :
<div id="wrapper">
<ul id="loader">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
And here my CSS :
body{background-color:#39414D;}
#wrapper {
margin: 5% auto;
display:block;
width:300px;
}
#loader{
margin: auto;
width:100px;
height:100px;
list-style:none;
}
#loader li{
background-color:#ffffff;
width:8px;
height:40px;
float:left;
margin-right:6px;
border-radius: 8px;
-webkit-animation: fadein 4s;
}
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#-webkit-keyframes insights {
0%{
height: 10px;
margin-top: 90px;
}
50%{
height: 50px;
margin-top: 50px;
}
100%{
height: 10px;
margin-top: 90px;
}
}
#loader li:nth-child(1){
-webkit-animation: insights 1s ease-in-out infinite -0.8s;
}
#loader li:nth-child(2){
-webkit-animation: insights 1s ease-in-out infinite -0.6s;
}
#loader li:nth-child(3){
-webkit-animation: insights 1s ease-in-out infinite -0.4s;
}
#loader li:nth-child(4){
-webkit-animation: insights 1s ease-in-out infinite -0.2s;
}
#loader li:nth-child(5){
-webkit-animation: insights 1s ease-in-out infinite 0;
}
Thanks for you answer!
instead of #-webkit-keyframes 'fadein' and #-webkit-keyframes 'insights' write
#-webkit-keyframes fadein and #-webkit-keyframes insights
wrong syntx, no need for '' in your code
http://codepen.io/anon/pen/xjuyn
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 want to make the animation .logo to spin 360 degree ,its an image...any help please?
.logo {
top:35%;
left:70%;
position: absolute;
-webkit-animation-name: spin;
-webkit-animation-duration: 5000;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in;
}
#-webkit-keyframes spin {
0%{ -webkit-transform: rotate(0deg);}
100%{ -webkit-transform: rotate(360deg);}
}
nav ul {
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 black;
background: #bcab98;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
min-width: 25%;
}
nav a {
background: #ddd;
color: #444;
display: block;
font: bold 16px/50px sans-serif;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease-in;
-moz-transition: all .25s ease-in;
-ms-transition: all .25s ease-in;
-o-transition: all .25s ease-in;
transition: all .25s ease-in;
}
nav a:hover{
text-decoration: underline;
}
nav li:hover{
text-decoration: none;
}
nav .dropdown1:after {
content: ' ▶';
}
nav .dropdown1:hover:after{
content:'\25bc';
}
nav .dropdown2:after {
content: ' ▶';
}
nav .dropdown2:hover:after{
content:'\25bc';
}
nav li:hover a {
background: #ccc;
}
nav li ul {
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
background: #bbb;
}
.drop_down_menu_for_cafe:after, .cf:before {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
<nav>
<ul class="drop_down_menu_for_cafe">
<li><a class="dropdown1" href="#"> Coffee Menu </a>
<ul>
<li> Cappuccino coffee </li>
<li> Expresso coffee </li>
<li> Black coffee </li>
</ul>
</li>
<li><a class="dropdown2" href="#"> Tea </a>
<ul>
<li> Green tea </li>
<li> Black tea </li>
<li> Dark tea </li>
</ul>
</li>
<li><a class="about" href="#"> About </a></li>
<li><a class="contacts" href="#"> Contacts </a></li>
</ul>
</nav>
<img src="lattee.jpg" alt="latte_coffee" width="1180px" height="550px">
<span class="logo"><img class="logo" name="logo" src="coffee-logo.jpg" alt="latte_logo" width="200px" height="200px"></span>
The problem is that you have -webkit-animation-duration: 5000; instead of -webkit-animation-duration: 5000ms;:
... and you might also want to support other browsers
.logo {
top: 35%;
left: 70%;
position: absolute;
-webkit-animation-name: spin;
-webkit-animation-duration: 5000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in;
-moz-animation-name: spin;
-moz-animation-duration: 5000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in;
-ms-animation-name: spin;
-ms-animation-duration: 5000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: ease-in;
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
nav ul {
-webkit-font-smoothing: antialiased;
text-shadow: 0 1px 0 black;
background: #bcab98;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
min-width: 25%;
}
nav a {
background: #ddd;
color: #444;
display: block;
font: bold 16px/50px sans-serif;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease-in;
-moz-transition: all .25s ease-in;
-ms-transition: all .25s ease-in;
-o-transition: all .25s ease-in;
transition: all .25s ease-in;
}
nav a:hover {
text-decoration: underline;
}
nav li:hover {
text-decoration: none;
}
nav .dropdown1:after {
content: ' ▶';
}
nav .dropdown1:hover:after {
content: '\25bc';
}
nav .dropdown2:after {
content: ' ▶';
}
nav .dropdown2:hover:after {
content: '\25bc';
}
nav li:hover a {
background: #ccc;
}
nav li ul {
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
background: #bbb;
}
.drop_down_menu_for_cafe:after,
.cf:before {
content: "";
display: table;
}
.cf:after {
clear: both;
}
.cf {
zoom: 1;
}
<nav>
<ul class="drop_down_menu_for_cafe">
<li><a class="dropdown1" href="#"> Coffee Menu </a>
<ul>
<li> Cappuccino coffee
</li>
<li> Expresso coffee
</li>
<li> Black coffee
</li>
</ul>
</li>
<li><a class="dropdown2" href="#"> Tea </a>
<ul>
<li> Green tea
</li>
<li> Black tea
</li>
<li> Dark tea
</li>
</ul>
</li>
<li><a class="about" href="#"> About </a>
</li>
<li><a class="contacts" href="#"> Contacts </a>
</li>
</ul>
</nav>
<img src="lattee.jpg" alt="latte_coffee" width="1180px" height="550px">
<span class="logo"><img class="logo" name="logo" src="coffee-logo.jpg" alt="latte_logo" width="200px" height="200px"></span>
Use this way. You are not putting all the vendor prefixes and the duration should have units: 5000ms or 5s:
.element-animation {
animation: animationFrames linear 4s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 4s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 4s;
-moz-animation-iteration-count: infinite;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 4s;
-o-animation-iteration-count: infinite;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 4s;
-ms-animation-iteration-count: infinite;
-ms-transform-origin: 50% 50%;
width: 50px; line-height: 50px; background: #99f; text-align: center;
}
#keyframes animationFrames {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-moz-keyframes animationFrames {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes animationFrames {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-o-keyframes animationFrames {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
}
}
#-ms-keyframes animationFrames {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
}
}
<div class="element-animation">Logo</div>
img {
text-align: center;
width: 20px;
margin: auto;
display: block;
-webkit-animation: rotateSpinner 1.2s linear infinite;
}
demo http://jsfiddle.net/cfe2ym54/
What is the problem here?
you forgot to add keyframes
img {
text-align: center;
width: 20px;
margin: auto;
display: block;
-webkit-animation: rotateSpinner 1.2s linear infinite;
animation: rotateSpinner 1.2s linear infinite;
}
#-webkit-keyframes rotateSpinner {
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes rotateSpinner {
to {
transform: rotate(360deg);
}
}
<div class="loading">
<img src="http://assets.57square.com/img/loading.png">
</div>
I have some loading bars done with CSS animations using keyframes. It works great in Chrome, but not in FireFox. I've double checked that all of the prefixes are correct, I've tried changing units and adjusting values, but nothing seems to make it work.
Her's a codepen link:
http://codepen.io/aviemet/pen/YPXzLQ
and here's my sass:
#-webkit-keyframes 'loadbars' {
0%{
height: 10px;
margin-top: 25px;
}
50%{
height:50px;
margin-top: 0px;
}
100%{
height: 10px;
margin-top: 25px;
}
}
#-moz-keyframes 'loadbars' {
0%{
height: 10px;
margin-top: 25px;
}
50%{
height:50px;
margin-top: 0px;
}
100%{
height: 10px;
margin-top: 25px;
}
}
#-o-keyframes 'loadbars' {
0%{
height: 10px;
margin-top: 25px;
}
50%{
height:50px;
margin-top: 0px;
}
100%{
height: 10px;
margin-top: 25px;
}
}
#keyframes 'loadbars' {
0%{
height: 10px;
margin-top: 25px;
}
50%{
height:50px;
margin-top: 0px;
}
100%{
height: 10px;
margin-top: 25px;
}
}
#-webkit-keyframes 'loadbars' {
0%{
height: 10px;
margin-top: 25px;
}
50%{
height:50px;
margin-top: 0px;
}
100%{
height: 10px;
margin-top: 25px;
}
}
#loading{
position: fixed;
top: 36%;
.loader{
z-index: 3;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
width: 60px;
height: 60px;
list-style: none;
li{
background-color: #FFFFFF;
width: 10px;
height: 10px;
float: right;
margin-right: 5px;
box-shadow: 2px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
li:first-child{
-webkit-animation: loadbars 0.6s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
-moz-animation: loadbars 0.6s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
-o-animation: loadbars 0.6s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
animation: loadbars 0.6s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
}
li:nth-child(2){
-webkit-animation: loadbars 0.6s ease-in-out infinite -0.2s;
-moz-animation: loadbars 0.6s ease-in-out infinite -0.2s;
-o-animation: loadbars 0.6s ease-in-out infinite -0.2s;
animation: loadbars 0.6s ease-in-out infinite -0.2s;
}
li:nth-child(3){
-webkit-animation: loadbars 0.6s ease-in-out infinite -0.4s;
-moz-animation: loadbars 0.6s ease-in-out infinite -0.4s;
-o-animation: loadbars 0.6s ease-in-out infinite -0.4s;
animation: loadbars 0.6s ease-in-out infinite -0.4s;
}
}
}
and the HTML it acts on:
<div id="loading">
<ul class="loader">
<li></li>
<li></li>
<li></li>
</ul>
</div>
I could revert to using a gif, but this would be so much cooler if it could render properly.
Thanks
Because you have quotation marks('') around loadbars. Remove them and it will work.
Updated codepen
I'm working off of a really great CSS3 animated background tutorial that can be found here
The only problem is that it won't work. Unfortunately, the tutorial is just a blog post with code, and there's no specific name for it, so I've been having trouble finding support for my issue.
It uses simple html markup:
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 02</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 03</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 04</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 05</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 06</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 07</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 08></span>
<div>
<h3></h3>
</div>
</li>
And then the rest is done in CSS3
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url() repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 40s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 40s linear infinite 0s;
-moz-animation: titleAnimation 40s linear infinite 0s;
-o-animation: titleAnimation 40s linear infinite 0s;
-ms-animation: titleAnimation 40s linear infinite 0s;
animation: titleAnimation 40s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/homepage/img01.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/homepage/img02.jpg);
animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/homepage/img03.jpg);
animation-delay: 10s;
-webkit-animation-delay: 10s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/homepage/img04.jpg);
animation-delay: 15s;
-webkit-animation-delay: 15s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/homepage/img05.jpg);
animation-delay: 20s;
-webkit-animation-delay: 20s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/homepage/img06.jpg);
animation-delay: 25s;
-webkit-animation-delay: 25s;
}
.cb-slideshow li:nth-child(7) span {
background-image: url(../images/homepage/img07.jpg);
animation-delay: 30s;
-webkit-animation-delay: 30s;
}
.cb-slideshow li:nth-child(8) span {
background-image: url(../images/homepage/img08.jpg);
animation-delay: 35s;
-webkit-animation-delay: 35s;
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
There's even a backup in case the browser doesn't support CSS3 animations:
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
This is supposed to ensure that you don't end up with a blank page, which is what I have. I've re-checked my links, and almost entirely copied the demo, but it's not displaying on my page. Is anyone familiar with CSS3 and have any ideas as to what my issue could be?
Maybe the problem can be fixed with adding webkit and such to
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 } so: #-webkit-keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 } #-moz-keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 } #-o-keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }