I'm trying to cause an element to move down and fade in once the page loads. Here is my html:
<h1 class="home-title animate">Hello</h1>
And my CSS:
h1 {
font-family: 'Sentinel A', 'Sentinel B', sans-serif!important;
font-weight: 300;
text-transform: inherit;
color: #2e2e2e;
margin-top: 100px;
font-size: 4rem;
line-height: 1.2;
margin: 2rem 0 2.5rem;
}
.home-title {
-webkit-animation-duration: .9s;
animation-duration: .9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: .9s;
animation-delay: .9s;
}
.animate {
-webkit-animation-name: animate;
animation-name: animate;
}
#-webkit-keyframes animate {
0% {
opacity: 0;
-webkit-transform: translateY(-40px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#keyframes animate {
0% {
opacity: 0;
transform: translateY(-40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
This seems to work ok in codepen, yet when it's on my site the words start off with a 1 opacity and rotate 90 degrees so the beginning of the word is pointed towards the top of the screen and then the animation stops.
Related
when i used to diffrent #keyframes only the first on is working while the other one isn't
when i put the #keyframes moving-from-left-to-right first and use it with .text it worked because it is the first one but the second #keyframes right-to-left that i used with the .img class is not workig and it isn't have the same coloring code as the first one
.img2 {
float: right;
width: 300px;
height: 300px;
border-radius: 10px 10px 0px 0px;
margin: 20px;
animation-name: right-to-left;
animation-duration: 1s;
animation-timing-function: ease;
}
.text {
margin: 20px;
font-size: large;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
animation-name: moving-from-left-to-right;
animation-duration: 1s;
}
#keyframes moving-from-left-to-right {
0% {
transform: translateX(-500px);
s
}
25% {
transform: translateX(-400
}
50% {
transform: translateX(-200px
}
75% {
transform: translateX(-100px
}
100% {
transform: translateX(0px
}
}
#keyframes right-to-left {
0% {
transform: translateX(200px);
}
25% {
transform: translateX(100
}
50% {
transform: translateX(50px
}
100% {
transform: translateX(0px
}
}
There are many reasons why it doesn't work as expected:
You are not closing your brackets
transform: translateX(100 should be transform: translateX(100)
You have some values in px and some without px.
transform: translateX(200px); is good,
transform: translateX(100 is bad (no closed bracket, no px)
In the part of code
#keyframes moving-from-left-to-right {
0% {
transform: translateX(-500px);
s
}
what is this s doing there?
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'll start with I am new to keyframes so this is prob a newbie error.
I want to get this code loader code working on my page:
https://codepen.io/gbrent/pen/XPMGXP
It does not work on my page or fiddle:
http://jsfiddle.net/qmL7x9j2/
HTML:
<div class="loader">
<span>{</span><span>}</span>
</div>
CSS:
.loader {
color: #0079f2;
font-family: Consolas, Menlo, Monaco, monospace;
font-weight: bold;
font-size: 30vh;
opacity: 0.8;
span {
display: inline-block;
animation: pulse 0.4s alternate infinite ease-in-out;
&:nth-child(odd) {
animation-delay: 0.4s;
}
}
}
#keyframes pulse {
to {
transform: scale(0.8);
opacity: 0.5;
}
}
Can anyone see what I am doing wrong? Am I missing something here?
To view the compiled CSS from your CodePen us the View compiled CSS option.
You CSS is then:
.loader {
color: #0079f2;
font-family: Consolas, Menlo, Monaco, monospace;
font-weight: bold;
font-size: 30vh;
opacity: 0.8;
}
.loader span {
display: inline-block;
-webkit-animation: pulse 0.4s alternate infinite ease-in-out;
animation: pulse 0.4s alternate infinite ease-in-out;
}
.loader span:nth-child(odd) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#-webkit-keyframes pulse {
to {
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.5;
}
}
#keyframes pulse {
to {
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.5;
}
}
Which works in the fiddle.
Sorry for the vague title, but essentially I copied some code from CodePen where it works flawlessly, but I can't get the exact same code to work in my project, or a jsFiddle I created.
Here's the relevant HTML:
<div class="loader loader--flipDelay loader--3d">
<span class="loader-item">1</span>
...
</div>
And the CSS for webkit browsers:
.loader-item {
display: inline-block;
width: 50px;
height: 50px;
margin-left: 2px;
background-color: rgba(61, 92, 126, 0.7);
color: rgba(61, 92, 126, 0.7);
-webkit-animation-duration: 2000ms;
-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-animation-iteration-count: infinite;
}
.loader--flipDelay .loader-item {
-webkit-animation-name: flipDelay;
}
#keyframes flipDelay {
0% {
transform: rotateX(0deg);
transform-origin: 0 0 0;
opacity: 1;
}
30% {
transform: rotateX(90deg);
transform-origin: 0 0 0;
opacity: 0;
}
40% {
transform-origin: 0 0 0;
}
60% {
transform: rotateX(90deg);
opacity: 0;
transform-origin: 0 100% 0;
}
90% {
transform: rotateX(0deg);
opacity: 1;
transform-origin: 0 100% 0;
}
}
Here's the CodePen which looks great.
I attempted to copy all the code into my project, and the elements are there, but absolutely nothing happens to them.
Here's a jsFiddle which shows the code not running. Please note that this code is only prefixed to work in Chrome and other webkit browsers.
My first thought was that it was a prefixing problem, but after removing all the warnings, still nothing happens to those loader-items.
Your code is missing -webkit- prefixes for #keyframes.
I've added vendor prefix for the rest of the browsers as well.
Fiddle
body {
font-family: 'PT Sans', sans-serif;
text-align: center;
background-color: #000;
padding-top: 40px;
}
h1,
h2 {
background-color: rgba(200, 200, 200, 0.2);
padding: 20px;
text-transform: uppercase;
color: #fff;
}
h1 {
font-size: 24px;
margin-bottom: 40px;
}
h1 a {
display: block;
margin-top: 10px;
text-transform: none;
color: #aaa;
font-size: 16px;
text-decoration: none;
}
h2 {
font-size: 16px;
margin-bottom: 15%;
}
.loader {
display: block;
overflow: hidden;
margin-bottom: 15%;
font-size: 0;
}
.loader--3d {
transform-style: preserve-3d;
-webkit-perspective: 800px;
perspective: 800px;
}
.loader--slideBoth {
overflow: visible;
}
.loader-item {
display: inline-block;
width: 50px;
height: 50px;
margin-left: 2px;
background-color: rgba(61, 92, 126, 0.7);
color: rgba(61, 92, 126, 0.7);
-webkit-animation-duration: 2000ms;
-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-animation-iteration-count: infinite;
animation-duration: 2000ms;
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-iteration-count: infinite;
}
.loader-item:nth-child(1) {
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.loader-item:nth-child(2) {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.loader-item:nth-child(3) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.loader-item:nth-child(4) {
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.loader-item:nth-child(5) {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
.loader-item:nth-child(6) {
-webkit-animation-delay: 600ms;
animation-delay: 600ms;
}
.loader--slowFlip .loader-item {
-webkit-animation-name: slowFlip;
animation-name: slowFlip;
}
.loader--flipHoz .loader-item {
-webkit-animation-name: flipHoz;
animation-name: flipHoz;
}
.loader--fade .loader-item {
-webkit-animation-name: fade;
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
animation-name: fade;
}
.loader--slowFlip .loader-item:nth-child(1),
.loader--flipHoz .loader-item:nth-child(1) {
-webkit-animation-delay: 150ms;
animation-delay: 150ms;
}
.loader--slowFlip .loader-item:nth-child(2),
.loader--flipHoz .loader-item:nth-child(2) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.loader--slowFlip .loader-item:nth-child(3),
.loader--flipHoz .loader-item:nth-child(3) {
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
}
.loader--slowFlip .loader-item:nth-child(4),
.loader--flipHoz .loader-item:nth-child(4) {
-webkit-animation-delay: 600ms;
animation-delay: 600ms;
}
.loader--slowFlip .loader-item:nth-child(5),
.loader--flipHoz .loader-item:nth-child(5) {
-webkit-animation-delay: 750ms;
animation-delay: 750ms;
}
.loader--slowFlip .loader-item:nth-child(6),
.loader--flipHoz .loader-item:nth-child(6) {
-webkit-animation-delay: 900ms;
animation-delay: 900ms;
}
.loader--flipDelay .loader-item {
-webkit-animation-name: flipDelay;
animation-name: flipDelay;
}
.loader--flipDelayDown .loader-item {
-webkit-animation-name: flipDelay;
-webkit-animation-direction: reverse;
animation-name: flipDelay;
animation-direction: reverse;
}
.loader--slideDown .loader-item,
.loader--slideUp .loader-item {
-webkit-animation-name: slideDown;
-webkit-animation-duration: 800ms;
-webkit-animation-timing-function: linear;
animation-name: slideDown;
animation-duration: 800ms;
animation-timing-function: linear;
}
.loader--slideDown .loader-item {
transform-origin: top left;
}
.loader--slideUp .loader-item {
transform-origin: bottom left;
}
.loader--slideBoth .loader-item {
-webkit-animation-name: slideBoth;
-webkit-animation-duration: 1000ms;
transform-origin: bottom left;
-webkit-animation-timing-function: linear;
animation-name: slideBoth;
animation-duration: 1000ms;
animation-timing-function: linear;
}
/**********************************/
/* KEYFRAME ANIMATION DEFINITIONS */
/**********************************/
#-webkit-keyframes slowFlip {
0% {
transform: rotateX(0deg);
}
40% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(180deg);
}
}
#-webkit-keyframes flipHoz {
0% {
transform: rotateY(0deg);
}
40% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(180deg);
}
}
#-webkit-keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes flipDelay {
0% {
transform: rotateX(0deg);
transform-origin: 0 0 0;
opacity: 1;
}
30% {
transform: rotateX(90deg);
transform-origin: 0 0 0;
opacity: 0;
}
40% {
transform-origin: 0 0 0;
}
60% {
transform: rotateX(90deg);
opacity: 0;
transform-origin: 0 100% 0;
}
90% {
transform: rotateX(0deg);
opacity: 1;
transform-origin: 0 100% 0;
}
}
#-webkit-keyframes slideDown {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(90deg);
}
}
#-webkit-keyframes slideBoth {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}
#keyframes slowFlip {
0% {
transform: rotateX(0deg);
}
40% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(180deg);
}
}
#keyframes flipHoz {
0% {
transform: rotateY(0deg);
}
40% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(180deg);
}
}
#keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes flipDelay {
0% {
transform: rotateX(0deg);
transform-origin: 0 0 0;
opacity: 1;
}
30% {
transform: rotateX(90deg);
transform-origin: 0 0 0;
opacity: 0;
}
40% {
transform-origin: 0 0 0;
}
60% {
transform: rotateX(90deg);
opacity: 0;
transform-origin: 0 100% 0;
}
90% {
transform: rotateX(0deg);
opacity: 1;
transform-origin: 0 100% 0;
}
}
#keyframes slideDown {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(90deg);
}
}
#keyframes slideBoth {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}
<h1>A collection of loaders using CSS 2D and 3D transforms created by #AshNolan_</h1>
<h2>Flip Delay Up</h2>
<div class="loader loader--flipDelay loader--3d"> <span class="loader-item">1</span>
<span class="loader-item">2</span>
<span class="loader-item">3</span>
<span class="loader-item">4</span>
<span class="loader-item">5</span>
<span class="loader-item">6</span>
</div>
That's not CSS. That's Sass, a language that compiles to CSS; while it doesn't add new styling capabilities (that's the browser's job), it does have a lot of language features that let you write simpler, cleaner, and less repetitive stylesheets. No browser can use Sass out of the gate; it has to be compiled to CSS first.
True as that is, I missed the point of the question. See the answer(s) above.
I am trying to upload the three blocks one by one and I want to make animation control the transform with the help of CSS3. Now what's happening is, it's working fine in google chrome (exactly the way I want) but it's not working fine in firefox. In firefox the three blocks are coming visible first and than the css3 animation starts working, which I don't want. I want the animation from the starting as its coming in google chrome.
body {
font-size: 14px;
line-height: 18px;
font-family: arial;
}
.wrapper {
width: 960px;
margin: 10px auto;
}
.one {
float: left;
width: 100px;
height: 100px;
margin: 20px 0;
border: 1px solid #afafaf;
background: #ddd;
animation: one 1s ease 1s;
-webkit-animation: one 1s ease 1s;
}
#keyframes one {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes one {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.two {
float: left;
width: 100px;
height: 100px;
margin: 20px 0;
border: 1px solid #afafaf;
background: #ddd;
animation: two 2s ease 2s;
-webkit-animation: two 2s ease 2s;
}
#keyframes two {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes two {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.three {
float: left;
width: 100px;
height: 100px;
margin: 20px 0;
border: 1px solid #afafaf;
background: #ddd;
animation: two 3s ease 3s;
-webkit-animation: two 3s ease 3s;
}
#keyframes three {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes three {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
<section class="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</section>
There are several things you should change.
The first is that you should use a common class for all three since they're styled similarly and all having the same effect. I used a class called fadein (and also renamed the animation to this, though they don't need to match).
The second is that you can reuse the same animation for each, just use different animation-delays so that they're spaced out differently.
The third is that you need to have the initial state of all of them be scale(0) so that they don't show in FF. You can then use animation-direction:forwards to make sure they show after the animation as well.
Lastly, if you're going to use -webkit-keyframes, you should use -webkit-transform inside of that as well so that you get more browser support.
body {
font-size: 14px;
line-height: 18px;
font-family: arial;
}
.wrapper {
width: 960px;
margin: 10px auto;
}
.fadein {
float: left;
width: 100px;
height: 100px;
margin: 20px 0;
border: 1px solid #afafaf;
background: #ddd;
transform:scale(0);
-webkit-transform:scale(0);
animation: fadein 1s ease 1s forwards;
-webkit-animation: fadein 1s ease 1s forwards;
}
#keyframes fadein {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes fadein {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1);
}
}
.two {
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.three {
animation-delay: 3s;
-webkit-animation-delay: 3s;
}
<section class="wrapper">
<div class="fadein one"></div>
<div class="fadein two"></div>
<div class="fadein three"></div>
</section>