I'm trying to align the text inside my div both horizontally and vertically, but it's only aligning horizontally. Everything I try doesn't work...
here's my css code:
#loading > h1 {
text-align: center;
font-size: 21px;
animation: fadeUpIn 3s;
-webkit-animation: fadeUpIn 3s; /* Safari and Chrome */
}
#-webkit-keyframes fadeUpIn /* Safari and Chrome */
{
from { opacity:0; top:150px; }
to { opacity:1; top: 70px; }
}
#loading{
position: absolute; top: 0; left: 0;
width:100%;
height: 100%;
background-color: gray;
color: white;
opacity: 1;
transition: 1s;
visibility: visible;
}
#loading.hidden{
opacity: 0;
visibility: hidden;
}
My html code:
<div id="loading">
<h1>Creative. Simple.</h1>
</div>
JS fiddle of the whole website:
https://jsfiddle.net/sjyoqdqy/
I'd suggest adding this CSS to #loading > h1:
#loading > h1 {
position: absolute;
top: 48%;
left: 0;
right: 0;
margin: 0;
}
Then update the animation position to be consistent:
#-webkit-keyframes fadeUpIn /* Safari and Chrome */
{
from { opacity:0; top:58%; }
to { opacity:1; top: 48%; }
}
Fiddle for an example:
https://jsfiddle.net/sjyoqdqy/6/
#loading {
...
display: table;
}
#loading h1 {
...
display: table-cell;
vertical-align: middle;
}
Related
While building a loader icon, I noticed odd behavior in IE11 compared to Chrome, using this animation:
#keyframes loader-2 {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-1.6rem);
}
100% {
transform: translateX(0);
}
}
The element correctly translates to the side at first, but then shifts super far before translating back. This only behaves this way in IE11 (works fine in Chrome/Firefox), and only on a pseudo-element (::after).
See this fiddle (or below code snippet) for an example. The top dot is a span, which works fine, the bottom dot is an ::after element, which behaves weirdly.
html {
font-size: 62.5%;
}
.splash {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
width: 100vw;
}
#keyframes loader-2 {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-1.6rem);
}
100% {
transform: translateX(0);
}
}
.loader {
display: inline-block;
height: 3.2rem;
padding: 4rem 0;
position: relative;
width: 3.2rem;
border: 1px solid red;
}
.loader span {
animation: loader-2 1.5s ease infinite;
background: #024;
border-radius: 50%;
bottom: 0;
display: block;
height: 1.6rem;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 1.6rem;
}
.loader div::after {
animation: loader-2 1.5s ease infinite;
background: #024;
border-radius: 50%;
bottom: 0;
content: '';
display: block;
height: 1.6rem;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 3.2rem;
width: 1.6rem;
}
<div class="splash">
<div class="loader">
<span></span>
<div></div>
</div>
</div>
I'm able to work around this by not using pseudo-elements of course, but I would still like to know what causes this issue.
Animation and transition for pseudo-elements is not supported by IE11, check here:
https://caniuse.com/#feat=mdn-css_selectors_after_animation_and_transition_support
To work around this issue, you can try to use ID for the div and write CSS for it and avoid using pseudo.
Modified code:
html {
font-size: 62.5%;
}
.splash {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
width: 100vw;
}
#keyframes loader-2 {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-1.6rem);
}
100% {
transform: translateX(0);
}
}
.loader {
display: inline-block;
height: 3.2rem;
padding: 4rem 0;
position: relative;
width: 3.2rem;
border: 1px solid red;
}
.loader span {
animation: loader-2 1.5s ease infinite;
background: #024;
border-radius: 50%;
bottom: 0;
display: block;
height: 1.6rem;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 1.6rem;
}
.loader #abc {
animation: loader-2 1.5s ease infinite;
background: #024;
border-radius: 50%;
bottom: 0;
content: '';
display: block;
height: 1.6rem;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 3.2rem;
width: 1.6rem;
}
<div class="splash">
<div class="loader">
<span></span>
<div id="abc"></div>
</div>
</div>
Output in IE 11 browser:
Once I go on the element which holds screen-transition class,
the following code just turns the background color from transparent
to green through hover:
.screen-transition{
position: relative;
display: block !important;
background-color: transparent;
z-index: 1;
}
.screen-transition::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: green;
z-index: -1;
transition: 1s;
opacity: 0;
}
.screen-transition:hover::before {
opacity: 1;
}
and now I just want to replace hover with sth else so that background color turns to green when the page is loaded
any workaround please?
Try setting the body of the page in the css file?
body {
background-color: green;
}
js code
document.body.onload=function ()
{
setTimeout(function()
{document.body.classList.add('animation_class')},1000);
}
CSS code
. animatin_class
{
background-color:green ! important;
}
body
{
background-color:red;
transition:all .4s;
}
If you want this fadeIn to happen on page Load, simply define a keyframe and add the animation to before class. Let me know if this works
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.screen-transition{
position: relative;
display: block !important;
background-color: transparent;
z-index: 1;
width: 100vw;
height: 100px;
}
.screen-transition::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: green;
z-index: -1;
transition: 1s;
animation: fadeIn 2s;
}
I'm trying to have a block of text overlay an animated (keyframed) image.
So far, I have tried combinations of display attributes such as inline-block with no luck. I have also attempted to play around with the positions, setting both the heading and the image to relative and absolute.
I would like the heading text (h4) to follow the animated image behind it.
html {
overflow: hidden;
}
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
vertical-align: bottom;
}
h4 {
position: absolute;
background-color: red;
width: 128px;
display: inline-block;
color: white;
font-size: 24px;
}
.transactionBG {
position: absolute;
left: 0;
overflow: hidden;
}
.transaction {
width: 64px;
height: 64px;
position: absolute;
animation: upDown 1.5s alternate infinite ease-in-out;
}
#keyframes upDown {
to {
transform: translateY(100px);
}
}
<div class="transactionBG" style="top: 10%;left: 50%;width: 128px;height: 278px;">
<img class="transaction" src="https://seeklogo.com/images/I/instagram-circle-logo-E285122AB7-seeklogo.com.png" style="width: 102.4px; height: 102.4px;">
<h4>test</h4>
</div>
Current State Demo: http://jsfiddle.net/4huj31fb/2/
you gave the animation to the image only. move this line :
animation: upDown 1.5s alternate infinite ease-in-out;
to the .transactionBG selector
html {
overflow: hidden;
}
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
vertical-align: bottom;
}
h4 {
position: absolute;
background-color: red;
width: 128px;
display: inline-block;
color: white;
font-size: 24px;
}
.transactionBG {
position: absolute;
left: 0;
overflow: hidden;
animation: upDown 1.5s alternate infinite ease-in-out;
}
.transaction {
width: 64px;
height: 64px;
position: absolute;
}
#keyframes upDown {
to {
transform: translateY(100px);
}
}
<div class="transactionBG" style="top: 10%;left: 50%;width: 128px;height: 278px;">
<img class="transaction" src="https://seeklogo.com/images/I/instagram-circle-logo-E285122AB7-seeklogo.com.png" style="width: 102.4px; height: 102.4px;">
<h4>test</h4>
</div>
transactionBG is the parent of h4. So you have to add the animation to transactionBG
.transactionBG {
position: absolute;
left: 0;
overflow: hidden;
animation: upDown 1.5s alternate infinite ease-in-out;
}
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
.body {
height: 100vh;
text-align: center;
}
.square {
width: 100vm;
height: 100vm;
/* For IE9 */
width: 100vmin;
height: 100vmin;
display: inline-block;
vertical-align: middle;
margin-top: calc((100vh - 100vmin) / 2);
background-image: url('https://ae01.alicdn.com/kf/HTB12ZJjMXXXXXa_aXXXq6xXFXXXE/3-Piece-Wall-font-b-Picture-b-font-Dreamy-font-b-Purple-b-font-font-b.jpg');
font-size: 0;
}
.square:before {
content: "";
height: 100%;
}
.square:before,
.content {
display: inline-block;
vertical-align: middle;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
#-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.content {
-webkit-animation: fadein 1s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s;
/* Firefox < 16 */
-ms-animation: fadein 1s;
/* Internet Explorer */
-o-animation: fadein 1s;
/* Opera < 12.1 */
animation: fadein 1s;
}
#left-content {
background-size: cover;
width: 50vmin;
height: 100vmin;
float: left;
}
#right-content {
background-size: cover;
width: 50vmin;
height: 100vmin;
float: right;
}
#left-content:after {
background-size: cover;
width: 50vmin;
height: 100vmin;
float: left;
opacity: 0;
content: ' ';
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#right-content:after {
background-size: cover;
width: 50vmin;
height: 100vmin;
float: right;
opacity: 0;
content: ' ';
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#left-content:hover:after+.square {
background-image: url('https://ae01.alicdn.com/kf/HTB1EuKlLVXXXXcmXpXXq6xXFXXXd/E-HOME-Stretched-LED-Canvas-Print-Blue-Rose-Flash-Effect-LED-Flashing-font-b-Optical-b.jpg');
opacity: 1;
}
#right-content:hover:after {
background-image: url('https://ae01.alicdn.com/kf/HTB12hyVPVXXXXbEaXXXq6xXFXXX8/-font-b-Canvas-b-font-Painting-Printed-Pictures-Paints-Wall-Hanging-font-b-Canvas-b.jpg');
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="body">
<div class="square">
<div class="content">
<a href="">
<div id="left-content"></div>
</a>
<a href="">
<div id="right-content"></div>
</a>
</div>
</div>
</div>
</body>
</html>
I would like to do the following.
DIV container contains two DIV (1 and 2).
When mouse is over DIV 1, the background image of DIV CONTAINER change to image1.
When mouse is over DIV 2, the background image of DIV CONTAINER change to image2.
I would like to try this with only CSS.
So it is actually possible with pseudo elements. Have a look at my example.
body, html {
margin: 0;
padding: 0;
height: 100%;
}
#main:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#main {
height: 170px;
border: 1px solid black;
box-sizing: border-box;
position: relative;
}
#div1 .show {
border-right: 1px solid black;
}
#div1:hover:before, #div2:hover:before {
position: absolute;
width: 100%;
height: 100%;
content: "";
left: 0;
top: 0;
z-index: 1;
pointer-events: none;
}
#div1:hover:before {
background: yellow;
}
#div2:hover:before {
background: green;
}
#div1, #div2 {
width: 50%;
display: block;
float: left;
text-align: center;
vertical-align: center;
box-sizing: border-box;
pointer-events: auto;
}
.show {
position: relative;
z-index: 2;
height: 168px;
}
<div id="main">
<div id="div1">
<div class="show">
div1
</div>
</div>
<div id="div2">
<div class="show">
div2
</div>
</div>
</div>
body { width: 100%; margin: 0; padding: 0; }
.container {
position: relative;
display: flex;
width: 100vw;
height: 100vh;
}
.div1, .div2 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 50%;
height: 100%;
font-size: 24px;
font-weight: bold;
text-shadow: 0 0 10px black;
color: hsla(0, 57.6%, 50%, 0.5);
background-color: hsla(0, 0%, 0%, 0.1);
}
.background1, .background2 {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: none;
z-index: -1;
}
.background1 {
background: url("http://i.imgur.com/zFYHM67.jpg");
background-repeat:no-repeat;
background-size: cover;
}
.background2 {
background: url("http://i.imgur.com/nYKEFNF.jpg");
background-repeat:no-repeat;
background-size: cover;
}
.div1:hover ~ .background1 {
display: flex;
}
.div2:hover ~ .background2 {
display: flex;
}
<div class="container">
<div class="div1">Div 1</div>
<div class="background1"></div>
<div class="div2">Div 2</div>
<div class="background2"></div>
</div>
fiddle
https://jsfiddle.net/Hastig/k652snyc/
I have a very basic piece of HTML with the objective of animating from display: none; to display: block with opacity changing from 0 to 1.
I'm using Chrome browser, which uses the -webkit prefixes as preference and did a -webkit-keyframes transition set to make the animation possible. However, it does not work and just changes the display without fading.
I have a JSFiddle here.
<html>
<head>
<style type="text/css">
#myDiv
{
display: none;
opacity: 0;
padding: 5px;
color: #600;
background-color: #CEC;
-webkit-transition: 350ms display-none-transition;
}
#parent:hover>#myDiv
{
opacity: 1;
display: block;
}
#parent
{
background-color: #000;
color: #FFF;
width: 500px;
height: 500px;
padding: 5px;
}
#-webkit-keyframes display-none-transition
{
0% {
display: none;
opacity: 0;
}
1%
{
display: block;
opacity: 0;
}
100%
{
display: block;
opacity: 1;
}
}
</style>
<body>
<div id="parent">
Hover on me...
<div id="myDiv">
Hello!
</div>
</div>
</body>
</head>
</html>
The display doesn't work with CSS transition or animation.
Use opacity, visibility or z-index. You can combine all them.
Try to use visibility: visible in place display: block and visibility: hidden in place display: none.
And finally, combine z-index: -1 and z-index: 100 for example.
Good work ;)
If you are using #keyframes you should use -webkit-animation instead of -webkit-transition. Here is the doc for #keyframes animation: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations.
See code snippet below:
.parent {
background-color: #000;
color: #fff;
width: 500px;
height: 500px;
padding: 5px;
}
.myDiv {
display: none;
opacity: 0;
padding: 5px;
color: #600;
background-color: #cec;
}
.parent:hover .myDiv {
display: block;
opacity: 1;
/* "both" tells the browser to use the above opacity
at the end of the animation (best practice) */
-webkit-animation: display-none-transition 1s both;
animation: display-none-transition 1s both;
}
#-webkit-keyframes display-none-transition {
0% {
opacity: 0;
}
}
#keyframes display-none-transition {
0% {
opacity: 0;
}
}
<div class="parent">
Hover on me...
<div class="myDiv">Hello!</div>
</div>
2016 UPDATED ANSWER
To reflect today's best practices, I would use a transition instead of an animation. Here is the updated code:
.parent {
background-color: #000;
color: #fff;
width: 500px;
height: 500px;
padding: 5px;
}
.myDiv {
opacity: 0;
padding: 5px;
color: #600;
background-color: #cec;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.parent:hover .myDiv {
opacity: 1;
}
<div class="parent">
Hover on me...
<div class="myDiv">Hello!</div>
</div>
You can not animate display property. You can try with visibility: hidden to visibility: visible
Just use position: fixed and drop the z-index: -5 at the end of the #keyframe animation (you can do any negative index....
CSS:
#keyframes fadeOut {
0% { opacity: 1
}
99% {
opacity: 0;
z-index: 1;
}
100%{
opacity: 0;
display:none;
position: fixed;
z-index: -5;
}
}
It's been tricky, it's been nasty, but here it is...
FadeOut (opacity) first
then truly hide (meaning: not covering up or catching any clicks, getting height: 0,...)
display: <whatever> is indeed no option.
But animating scaleY is. Or translate to far-far-away or the old classic: animating max-height (from a specific high px value) down to 0px…
For an earlier version of this snippet with some more general info on „back and forth animation on class toggle“ (and preventing that animation upon initial page load look here.
const div = document.querySelector('.target')
function toggleTarget() {
div.classList.add('active');
div.classList.toggle('play');
}
/* REF https://stackoverflow.com/a/49575979 */
/* REF https://stackoverflow.com/questions/26607330/css-display-none-and-opacity-animation-with-keyframes-not-working/64857102#64857102 */
body, html { /* eye candy */
background: #444; display: flex; min-height: 100vh; align-items: center; justify-content: center;
}
button { font-size: 4em; border-radius: 20px; margin-left: 60px;}
div { /* eye candy */
width: 200px; height: 100px; border-radius: 20px;
background: green; display: flex; align-items: center; justify-content: center;
font-family: sans-serif; font-size: 2em; color: white; text-align: center;
text-shadow: 0px 2px 4px rgba(0,0,0,.6);
}
/* using this extra .active class prevents that there is an animation already on loading */
.active {
animation: fadeAndHideBack 1s linear forwards;
}
.play {
opacity: 0;
/* learning curve: setting background "awaits" animation finish,
setting scale prematurely jumps to it, then doing animation from there */
animation: fadeAndHide 1s linear forwards;
}
#keyframes fadeAndHide {
0% { opacity: 1; }
99.9% { opacity: 0; max-height: 100px; }
100% { opacity: 0; max-height: 0; }
}
#keyframes fadeAndHideBack {
0% { opacity: 0; max-height: 0; }
0.1% { opacity: 0; max-height: 100px; }
100% { opacity: 1; }
}
<div class="target"></div>
<button onclick="toggleTarget()">
Toggle
</button>
You can use Javascript to change both the display properties and animation. You can't put display in #keyframes.
Start with the element display:none. Then simultaneously add display:block and animation:* classes.
Here's a working example with animation in/out.
add this css ;
.fade:not(.show) {
opacity: 1;
}
this work for me..
How about this example: jsfiddle
The issue was needing to use an animation rather than transition with keyframes
#-webkit-keyframes fadeAnimation {
0% {
opacity: 0;
}
25% {
opacity: 0.25;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#myDiv {
opacity: 0;
padding: 5px;
color: #600;
background-color: #CEC;
}
#parent {
background-color: #000;
color: #FFF;
width: 500px;
height: 500px;
padding: 5px;
}
#parent:hover #myDiv {
-webkit-animation: fadeAnimation 6s;
}
You can't animate the display property. You can animate the visibility property. But visibility is not the same as display, as it will not remove the div element completely from the DOM (the property, visibility:collapse, can remove an element from the DOM, if the element is a table. This is an exception). You can instead animate CSS properties height and width. For instance, the below code will animate the square-block out.
function myAnimation(){
var square= document.getElementById('square');
if(square.getAttribute("class")==='square'){
square.classList.add('animation');
}else{
square.classList.remove('animation');
}
}
.square {
background-color:blue;
transform: translate(0, 0);
width: 100px;
height: 100px;
opacity: 1;
transition: all 0.5s ease-out;
}
.square.animation {
transform: translate(-260px, -260px);
width: 0;
height: 0;
opacity: 0;
transition: all 0.5s ease-in;
}
<html>
<body>
<div class="square" id="square"></div>
<br/>
<button onclick="myAnimation()">Animate</button>
</body>
</html>
FYI, I have used CSS transitions to animate the div. Hope this was useful.