Can anyone help me please? I don't know how to use animate.css.
.original,
.box {
border-radius: 6px;
}
.original {
background: #eaeaed;
border: 1px dashed #cecfd5;
float: left;
margin: 12px 15px;
}
.box {
background: #2db34a;
height: 95px;
line-height: 95px;
text-align: center;
width: 95px;
}
.spin {
cursor: pointer;
transform-style: preserve-3d;
}
.spin:hover {
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
<div class="original">
<div class="spin">
<div class="box box-1">Box 1</div>
</div>
</div>
I dont think that CSS have the property "slideDown".
But you can make somthing like this with CSS trnasition
http://jsbin.com/hiboyoxoha/1/edit
.wrapper {
width: 200px;
height: 100px;
background: #44f;
text-align: center;
color: #fff;
line-height: 100px;
font: 25px arial;
overflow: hidden;
position: relative;
}
.inner {
position: absolute;
height: 100px;
top: -100px;
transition: all 0.5s;
background: #444;
}
.wrapper:hover .inner {
top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="wrapper">hover me
<div class="inner">Hello i am new div</div>
</div>
</body>
</html>
Related
#import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght#700&family=Reggae+One&display=swap');
html {
margin: 0;
padding: 0;
background-image: url(main.jpg);
width: 100%;
height: auto;
background-size: cover;
z-index: 100;
}
html::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .5;
z-index: -10;
}
/*Main text on the main page*/
.maintext {
display: block;
height: auto;
/* border: 2px solid red; */
padding: 0;
margin: 0;
}
.maintext h1 {
color: transparent;
display: inline-block;
position: relative;
font-family: 'Reggae One', cursive;
/* border: 2px solid red; */
margin-top: -10px;
animation: show .5s ease forwards;
animation-delay: 1s;
color: black;
}
.maintext h1 span {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
background-color: red;
animation: overlay 1s ease forwards;
animation-delay: .5s;
}
h1:nth-child(1) {
animation-delay: 1s;
}
h1:nth-child(2) {
animation-delay: 2s;
}
h1:nth-child(3) {
animation-delay: 3s;
}
h1:nth-child(1) span {
animation-delay: .5s;
}
h1:nth-child(2) span {
animation-delay: 1.5s;
}
h1:nth-child(3) span {
animation-delay: 2.5s;
}
.maintext .butt {
position: relative;
left: 900px;
top: 200px;
width: 250px;
height: 50px;
padding: 5px 30px;
border-radius: 8px;
background-color: transparent;
font-size: 25px;
font-weight: bolder;
font-family: 'Reggae One', cursive;
letter-spacing: 4px;
transition-duration: 2s;
transition-timing-function: ease;
color: white;
}
.maintext .butt:hover {
color: black;
box-shadow: 1px 1px 200px 200px rgba(92, 137, 204, .3);
background: transparent;
}
#keyframes overlay {
50% {
width: 100%;
left: 0;
}
100% {
left: 100%;
width: 0;
}
}
#keyframes show {
100% {
color: white;
}
}
<section class="hero">
<div class="maintext">
<h1>Hello, <span></span></h1><br>
<h1>My Name is <span></span></h1><br>
<h1>ABC XYZ <span></span></h1><br>
<button class="butt">Portfolio</button>
</div>
</section>
Output is: as in code but only scans one line at a time one after another.
I have been through the code several times, I did every h1 one by one, I cant see whats wrong. I have had a look at other posts as well but could not find the solution, I am sure I have typed correctly but for some reason its playing up.
You guidance would be greatly appreciated.
There you added <br> after every h1. So in css you can't get second h1 by :nth-child(2). You have need to change those by :nth-child(1) :nth-child(3) :nth-child(5)
#import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght#700&family=Reggae+One&display=swap');
html
{
margin:0;
padding:0;
background-image: url(main.jpg);
width: 100%;
height: auto;
background-size: cover;
z-index: 100;
}
html::after{
content:"";
position: absolute;
left:0;
top:0;
height: 100%;
width:100%;
background-color: black;
opacity: .5;
z-index: -10;
}
/*Main text on the main page*/
.maintext
{
display:block;
height:auto;
/* border: 2px solid red; */
padding:0;
margin:0;
}
.maintext h1{
color:transparent;
display:inline-block;
position: relative;
font-family: 'Reggae One', cursive;
/* border: 2px solid red; */
margin-top: -10px;
animation: show .5s ease forwards;
animation-delay: 1s;
color:black;
}
.maintext h1 span{
position: absolute;
left:0;
top:0;
height: 100%;
width: 0;
background-color: red;
animation: overlay 1s ease forwards;
animation-delay: .5s;
}
h1:nth-child(1){
animation-delay:1s;
}
h1:nth-child(3){
animation-delay:2s;
}
h1:nth-child(5){
animation-delay:3s;
}
h1:nth-child(1) span{
animation-delay:.5s;
}
h1:nth-child(3) span{
animation-delay: 1.5s;
}
h1:nth-child(5) span{
animation-delay: 2.5s;
}
.maintext .butt{
position: relative;
left: 900px;
top: 200px;
width: 250px;
height: 50px;
padding :5px 30px;
border-radius: 8px;
background-color: transparent;
font-size: 25px;
font-weight: bolder;
font-family: 'Reggae One', cursive;
letter-spacing: 4px;
transition-duration: 2s;
transition-timing-function:ease;
color:white;
}
.maintext .butt:hover
{
color: black;
box-shadow: 1px 1px 200px 200px rgba(92,137,204,.3);
background: transparent;
}
#keyframes overlay {
50%{
width: 100%;
left: 0;
}
100%{
left:100%;
width:0;
}
}
#keyframes show{
100%{
color:white;
}
}
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
<link rel="stylesheet" href="portfolio.css">
</head>
<body>
<section class="hero">
<!-- <div class="menu">
<ul>
<li>About Me</li>
<li>Work Experience</li>
<li>Hobbies</li>
<li>Gallery</samp></li>
</ul>
</div> -->
<div class="maintext">
<h1>Hello, <span></span></h1><br>
<h1>My Name is <span></span></h1><br>
<h1>ABC XYZ <span></span></h1><br>
<button class="butt">Portfolio</button>
</div>
</section>
</body>
</html>
If you hover over the box in my example, then the color of the small box changes slowly from red to yellow. But if you stop hovering then it immediately jumps back to red.
.container { position: relative; background: black; width: 200px; height: 200px; }
.subcontainer { position: absolute; bottom: 10px; width: 100%; height: 20px; background: red; animation-duration: 2s; }
.container:hover .subcontainer { background: yellow; animation-duration: 2s; animation-name: example; }
#keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
<div class="container">
<div class="subcontainer">
</div>
</div>
How can I prevent this instant color change? I tried to add animation-duration: 2s; to .subcontainer as well, but it does not work.
You need a transition defined in the .subcontainer instead of an animation
.container {
position: relative;
background: black;
width: 200px; height: 200px; }
.subcontainer {
position: absolute;
bottom: 10px; width: 100%; height: 20px;
background: red;
transition: background 2s 0s }
.container:hover .subcontainer { background: yellow; }
<div class="container">
<div class="subcontainer">
</div>
</div>
Flip animation is not working correctly if it has some element inside with position property. This can be only reproduced on the first hover attempt after the page load.
Does anyone know why it has such behavior?
HTML:
<div class="parent">
<div class="card">
<div class="card__logo">
Logo
</div>
<div class="card__burger">
<div class="relative">Menu</div>
</div>
</div>
</div>
SCSS:
.card {
width: 90px;
height: 90px;
transition: transform 1s;
transform-style: preserve-3d;
&__logo,
&__burger {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
backface-visibility: hidden;
background: #000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
&__burger {
transform: rotateY(180deg);
}
}
.parent:hover {
.card {
transform: rotateY(180deg);
}
}
.relative {
position: relative;
}
Codeopen example
Update: I can reproduce this only in Chrome
I have different code but this will help you.
<style>
.flip-card {
background-color: transparent; width: 100px;
height: 100px; perspective: 1000px; margin-left:16%;
}
.flip-card-inner {
position: relative; width: 100%; height: 100%;
text-align: center; transition: transform 0.6s; transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
position: absolute; width: 100%;
height: 100%; backface-visibility: hidden;
}
.flip-card-front {
background-color: #ffffff; color: black; z-index: 2;
}
.flip-card-back {
background-color: #ffffff; color: white;
transform: rotateY(180deg); z-index: 1;
}
.coninstallbtn { margin-top: 31%; margin-left: 20%; }
</style>
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
Front View
</div>
<div class="flip-card-back">
Back View
</div>
</div>
</div>
</body>
I am trying to make a div change its position when the user is hovering another div. The div that triggers the move is not parent nor adjecent to the div that shall move. Can this be done with css or do I need to go for js?
Here is the code:
.container{
display: inline-block;
}
.redOnTop{
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
}
.smallBlueBehind{
display: inline-block;
position: relative;
left: -55px;
width: 50px;
height: 100px;
background: blue;
transition: 1s;
z-index: -10;
}
#redLeft:hover + #blueLeft{
transition: 1s;
left: -5px;
}
#showingArea{
display: inline-block;
position: relative;
//overflow: hidden;
width: 50px;
height: 100px;
left: -5px;
border: 1px solid black;
}
//------------------------------ HOW TO WRITE HERE!
#redRight:hover #blueRight{
transition: 1s;
left: 0px;
}
<div class="container">
<div class="redOnTop" id="redLeft">
</div>
<div class="smallBlueBehind" id="blueLeft">
</div>
</div>
<div class="container">
<div class="redOnTop" id="redRight">
</div>
<div id="showingArea">
<div class="smallBlueBehind" id="blueRight">
</div>
</div>
</div>
As you can see I want the right blue square slide out from under the red square and end up in the black-bordered box when hovering said red square. Same as the left one.. only difference is that I want it inside the black box.
Here is a codepen if someone likes that better.
Any suggestions are appreciated! Thank you.
You can use adjacent selector and then target the blue rectangle...
#redRight:hover + #showingArea #blueRight{
transition: 1s;
left: 0px;
}
.container {
display: inline-block;
}
.redOnTop {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
}
.smallBlueBehind {
display: inline-block;
position: relative;
left: -55px;
width: 50px;
height: 100px;
background: blue;
transition: 1s;
z-index: -10;
}
#redLeft:hover + #blueLeft {
transition: 1s;
left: -5px;
}
#showingArea {
display: inline-block;
position: relative;
//overflow: hidden;
width: 50px;
height: 100px;
left: -5px;
border: 1px solid black;
}
#redRight:hover + #showingArea #blueRight {
transition: 1s;
left: 0px;
}
<div class="container">
<div class="redOnTop" id="redLeft">
</div>
<div class="smallBlueBehind" id="blueLeft">
</div>
</div>
<div class="container">
<div class="redOnTop" id="redRight">
</div>
<div id="showingArea">
<div class="smallBlueBehind" id="blueRight">
</div>
</div>
</div>
codepen
My codes are pretty simple yet I've failed to get how a transition works and how it doesn't work on my HTML right here:
<div id="footer">
<div id="footer1">
<p> This should be a footer </p>
</div>
</div>
and my CSS
#footer {
position: fixed;
bottom: 0;
background-color: black;
min-width: 100%;
font-family: Agency FB;
transition: width 3s;
}
#footer1 {
text-align: center;
color: #4e4e4e;
}
#footer:hover {
opacity: .8;
color: white;
height: 100px;
}
I don't see anything wrong with my code. That or I'm still inexperienced. Thanks!
Try this
#footer {
position: fixed;
bottom: 0;
background-color: black;
min-width: 100%;
font-family: Agency FB;
transition: height 3s;
height: 50px;
}
#footer1 {
text-align: center;
color: #4e4e4e;
}
#footer:hover {
opacity: .8;
color: white;
height: 100px;
}
If it doesn't work please tell me
#footer {
position: absolute;
bottom:0;
background-color: black;
min-width: 100%;
height:50px;
font-family: Agency FB;
transition: width 3s, height 1s, transform 1s;
}
#footer1 {
text-align: center;
color: #4e4e4e;
}
#footer:hover {
opacity: .8;
color: white;
height: 100px;
}
<div id="footer">
<div id="footer1">
<p> This should be a footer </p>
</div>
</div>
Just play around with the values of transition: width 3s, height 1s, transform 1s;
Cheers!