How would I properly animate a div with a pseudo selector without out the animation skipping back to the main animation of the div and then playing the animation assigned to the pseudo selector.
The element in question is the red circle, that simply needs to move upwards by (X)amount, instead of moving back then moving up.
I have attached a fiddle and coding for this question.
.blobs {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: white;
width: 900px;
height: 200px;
margin: auto;
}
.blob {
background: grey;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
border-radius: 100%;
text-align: center;
line-height: 70px;
}
#keyframes blob-anim-red {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(100px);
animation: forwards;
}
}
#keyframes blob-anim-blue {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(200px);
}
}
#keyframes blob-anim-green {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(300px);
}
}
.blob:nth-child(2) {
animation: blob-anim-red cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate;
background: rgba(255, 0, 0, .3);
}
#keyframes move-up {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-10px);
}
}
.blob:nth-child(2):hover {
/*transform:translateY:(20px);*/
animation: move-up cubic-bezier(1, .01, 0, 1) 0.5s alternate;
transition: transform 0.3s, color 0.3s, background 0.3s;
color: #fff;
background: rgba(255, 0, 0, 0.8);
}
.blob:nth-child(3) {
animation: blob-anim-blue cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate;
background: rgba(0, 255, 0, .3);
}
.blob:nth-child(4) {
animation: blob-anim-green cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate;
background: rgba(0, 0, 255, .3);
}
.blob:first-child {
background: #ccc;
}
<body>
<div class="help"></div>
<div class="blobs">
<div class="blob">
<p>1st Child</p>
</div>
<!-- 1st child-->
<div class="blob">
<p>2nd Child</p>
</div>
<!-- 2nd child-->
<div class="blob">
<p>3rd Child</p>
</div>
<!-- 3rd child-->
<div class="blob">
<p>4th Child</p>
</div>
<!-- 4th child-->
</div>
</body>
JsFiddle
Your animation that you trigger on :hover overrides the transform property of the red circle, hence it looks like the whole animation was reset. One idea to overcome this to use margin instead of transform: translate or just copy the final transform property a second time.
Here is one way of doing it, using the margin property for the animation that is being fired on :hover. This solution is using simple transitions instead of a animation.
.blobs {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: white;
width: 900px;
height: 200px;
margin: auto;
}
.blob {
background: grey;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
border-radius: 100%;
text-align: center;
line-height: 70px;
}
#keyframes blob-anim-red {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(100px);
animation: forwards;
}
}
#keyframes blob-anim-blue {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(200px);
}
}
#keyframes blob-anim-green {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(300px);
}
}
.blob:nth-child(2) {
animation: blob-anim-red cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate;
background: rgba(255, 0, 0, .3);
/*relevant change 1*/
transition-property: margin, color;
transition-duration: 0.3s;
}
.blob:nth-child(2):hover {
/*relevant change 2*/
margin-top: -90px;
color: #fff;
background: rgba(255, 0, 0, 0.8);
}
.blob:nth-child(3) {
animation: blob-anim-blue cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate;
background: rgba(0, 255, 0, .3);
}
.blob:nth-child(4) {
animation: blob-anim-green cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate;
background: rgba(0, 0, 255, .3);
}
.blob:first-child {
background: #ccc;
}
<body>
<div class="help"></div>
<div class="blobs">
<div class="blob">
<p>1st Child</p>
</div>
<!-- 1st child-->
<div class="blob">
<p>2nd Child</p>
</div>
<!-- 2nd child-->
<div class="blob">
<p>3rd Child</p>
</div>
<!-- 3rd child-->
<div class="blob">
<p>4th Child</p>
</div>
<!-- 4th child-->
</div>
</body>
Related
I started animation practice today.
I have a 3d box that I am rotating but no matter how big the viewing area is it flies way higher than it needs to and jumps off the page before coming down.
on your particular screen it may just not have enough room but no matter how small I make it , it still overflows the top of the screen.
Also, is it possible to just rotate in place with something like this as well?
Codepen
I don't think this code is gonna tell enough but stack overflow forced me to put something with the codepen.
.perspective {
transform-style: preserve-3d;
--px3d: 50px;
animation: boxanimation 5s linear 1s
infinite;
}
#keyframes boxanimation {
50% {
transform: rotateX(0deg)
rotateY(-360deg);
}
100% {
transform: rotateX(360deg)
rotateY(-360deg);
}
}
If you are looking to rotate your box in place, I would remove the positioning values on the .box elements and put them on the .perspective container, as that is what you are animating. Those positioning values are likely causing some unintended side effects.
Is this what you were looking for?
* {
box-sizing: border-box;
}
body {
background-color: rgb(73, 73, 73);
}
.box {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgb(145, 145, 148);
box-shadow: black 1px 1px 7px, black 2px 2px 10px inset;
text-align: center;
text-shadow: black 3px 3px 5px;
font-size: 2rem;
padding-top: 1%;
}
.front {
transform: translate3d(0, 0, var(--px3d));
background-color: rgb(1, 220, 249);
}
.back {
transform: rotateY(180deg) translate3d(0, 0, var(--px3d));
background-color: rgb(232, 232, 232);
}
.top {
transform: rotateX(90deg) translate3d(0, 0, var(--px3d));
background-color: rgba(0, 128, 0);
}
.left {
transform: rotateY(-90deg) translate3d(0, 0, var(--px3d));
background-color: rgba(14, 122, 188);
}
.bottom {
transform: rotateX(-90deg) translate3d(0, 0, var(--px3d));
background-color: rgba(0, 0, 255);
}
.right {
transform: rotateY(90deg) translate3d(0, 0, var(--px3d));
background-color: pink;
}
.perspective {
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
--px3d: 50px;
animation: boxanimation 5s linear 1s infinite;
transform-origin: center center;
}
#keyframes boxanimation {
50% {
transform: rotateX(0deg) rotateY(-360deg);
}
100% {
transform: rotateX(360deg) rotateY(-360deg);
}
}
<div class="perspective">
<div class="box bottom">Bottom</div>
<div class="box top">Top</div>
<div class="box left">Left</div>
<div class="box right">Right</div>
<div class="box back">Back</div>
<div class="box front">Front</div>
</div>
I'm just animating a simple text, then, after some time, I want it to disappear, however, a few issues appear:
When it first fades in, you can see that the opacity value isn't respected at all, the text appears almost out of nowhere.
When it fades out, you can see that the movement is weird and the opacity transition runs after the movement.
#container {
width: 960px;
height: 200px;
border: 1px solid black;
position: absolute;
}
#message {
position: relative;
z-index: 2;
color: black;
font-size: 18px;
opacity: 0;
top: 60px;
left: 100px;
transform: translate3d(0, -25px, 0);
animation: showMessage 1.5s ease 1.5s forwards, hideMessage 1.5s ease 4s forwards;
}
#keyframes showMessage {
0% {
opacity: 0;
transform: translate3d(0, -25px, 0);
}
100% {
opacity: 100;
transform: translate3d(0, 0, 0);
}
}
#keyframes hideMessage {
0% {
opacity: 100;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(-25px, 0, 0);
}
}
<div id="container">
<div id="message">
Hey, look at me!
</div>
</div>
What gives? If I remove the second animation, everything comes back to normal.
The property opacity goes from 0 to 1, so the change is happening almost instantly. About the weird movement when leaving, seems fine to me.
#container {
width: 960px;
height: 200px;
border: 1px solid black;
position: absolute;
}
#message {
position: relative;
z-index: 2;
color: black;
font-size: 18px;
opacity: 0;
top: 60px;
left: 100px;
transform: translate3d(0, -25px, 0);
animation: showMessage 1.5s ease 1.5s forwards, hideMessage 1.5s ease 4s forwards;
}
#keyframes showMessage {
0% {
opacity: 0;
transform: translate3d(0, -25px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes hideMessage {
0% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(-25px, 0, 0);
}
}
<div id="container">
<div id="message">
Hey, look at me!
</div>
</div>
Check this code, I hope this will help you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container {
width: 960px;
height: 200px;
border: 1px solid black;
position: absolute;
}
#message {
position: relative;
z-index: 2;
color: black;
font-size: 18px;
opacity: 0;
top: 60px;
left: 100px;
transform: translate3d(0, -25px, 0);
animation-name: showMessage;
animation-duration: 3s;
animation-delay: 500ms;
animation-direction: alternate;
}
#keyframes showMessage {
0% {
opacity: 0;
transform: translate3d(0, -55px, 0);
}
50% {
opacity: 100;
transform: translate3d(0, 0, 0);
}
100%{
opacity: 0;
transform: translate3d(-65px, 0, 0);
}
}
#keyframes hideMessage {
0% {
opacity: 100;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(-65px, 0, 0);
}
}
</style>
</head>
<body>
<div id="container">
<div id="message">
Hey, look at me!
</div>
</div>
</body>
</html>
I have 4 cards that lay flat and "stand up" on hover however they also flip as they had a front and a back. I only want one-sided cards and I don't know how to stop them flipping. I have removed the html for the back of the card however I can't seem to stop the card flipping in CSS. What do I need to change in my code to stop them flipping?
.card-holder {
width: 90%;
height: 70%;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: -370em;
text-align: center;
}
div:target .card-face {
animation: flip-2 1s;
animation-fill-mode: forwards;
}
div:target .card-face:before {
animation: shadow-2 1s;
animation-fill-mode: forwards;
}
.card {
display: inline-block;
perspective: 1000px;
position: relative;
margin: 50px;
}
.card:hover .card-face {
animation: flip-2 1s;
animation-fill-mode: forwards;
}
.card:before{
animation: shadow-2 1s;
animation-fill-mode: forwards;
}
.card-face {
display: block;
width: 139px;
height: 250px;
transform-origin: bottom;
animation: flip 1s;
animation-direction: reverse;
animation-fill-mode: forwards;
}
.front-card, .project-img {
width: inherit;
height: inherit;
}
.card:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s;
transform-origin: bottom;
animation: shadow 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
.card-face {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front-card {
/* backface-visibility: hidden; */
position: absolute;
top: 0;
left: 0;
}
/* .back-card {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 2;
} */
.front-card {
transform: rotateY(180deg);
}
#keyframes flip {
0% {
transform: rotateX(50deg) rotateY(0deg);
}
60% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(0deg) rotateY(180deg);
}
}
#keyframes shadow {
0% {
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0deg) translateZ(-60px) scale(0.85);
opacity: 1;
}
60% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.15) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;
}
100% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.05) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;
}
}
/* #keyframes flip-2 {
0% {
transform: rotateX(50deg) rotateY(0deg);}
60% {
transform: rotateX(0deg); }
100% {
transform: rotateX(0deg) rotateY(180deg);}
} */
#keyframes shadow-2 {
0% {
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0deg) translateZ(-60px) scale(0.85);
opacity: 1;}
60% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.15) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;}
100% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.05) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;}
}
<div class="card-holder" id="all-cards">
<div class="card" id="card-1">
<a href="#card-1" class="card-face">
<div class="front-card">
<img class="project-img" src="https://i.imgur.com/0RUrrQF.jpg" alt="Death">
</div>
</a>
</div>
<div class="card" id="card-2">
<a href="#card-2" class="card-face">
<div class="front-card">
<img class="project-img" src="https://i.imgur.com/ulOYmlT.jpg" alt="Death">
</div>
</a>
</div>
</div>
remove this line line 100% {
transform: rotateX(0deg) rotateY(180deg);
} from ...
#keyframes flip {
0% {
transform: rotateX(50deg) rotateY(0deg);
}
60% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(0deg) rotateY(180deg);
}
}
I have a sequence of animations, each delayed to appear one after the other.
Sequence:
Logo
h1
hr
background starts scrolling upwards
Using animation-fill-mode: backwards each element does not appear on the page until it is animated-in. I would like the same to happen to the background. So it does not appear until all the other animations are complete. The background would then start scrolling upwards.
/*Top Gif*/
.banner {
position: relative;
float: left;
width: 100%;
height: 400px;
text-align: center;
}
.opening {
display: block;
background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png);
animation: 100s scroll infinite linear;
animation-delay: 3s;
animation-fill-mode: background;
margin: 2px 0 0 0;
}
.textBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
width: 300px;
margin-bottom: 20px;
}
.logo--animated {
animation: popUp 1s ease-out;
}
.textBox h1 {
color: #FFF;
font-size: 60px;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
line-height: 50px;
animation: moveInRight 0.7s ease-out;
animation-delay: 1.2s;
animation-fill-mode: backwards;
}
hr.style-two {
border: 0;
height: 3px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
animation: moveInRight 0.4s ease-out;
animation-delay: 1.9s;
animation-fill-mode: backwards;
}
.textBox h4 {
line-height: 10px;
font-weight: normal;
font-size: 20px;
animation: moveInRight 0.6s ease-out;
animation-delay: 2.3s;
animation-fill-mode: backwards;
}
/*Animations*/
#keyframes scroll {
100% {
background-position: 0px -3000px;
}
}
#keyframes popUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(-80px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<div class="row">
<div class="col-lg-12">
<div class="banner opening">
<div class="opening">
<div class="textBox">
<img class="logo logo--animated" src="logo.png">
<h1>Title</h1>
<hr class="style-two">
<h4>Sub-Title</h4>
</div>
</div>
</div>
</div>
</div>
If you want the background to just appear, try this.
/*Top Gif*/
.banner {
position: relative;
float: left;
width: 100%;
height: 400px;
text-align: center;
}
.opening {
animation-delay: 5s;
display: block;
animation: 100s scroll infinite linear;
animation-delay: 3s;
animation-fill-mode: forwards;
margin: 2px 0 0 0;
}
.textBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
width: 300px;
margin-bottom: 20px;
}
.logo--animated {
animation: popUp 1s ease-out;
}
.textBox h1 {
color: #FFF;
font-size: 60px;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
line-height: 50px;
animation: moveInRight 0.7s ease-out;
animation-delay: 1.2s;
animation-fill-mode: backwards;
}
hr.style-two {
border: 0;
height: 3px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
animation: moveInRight 0.4s ease-out;
animation-delay: 1.9s;
animation-fill-mode: backwards;
}
.textBox h4 {
line-height: 10px;
font-weight: normal;
font-size: 20px;
animation: moveInRight 0.6s ease-out;
animation-delay: 2.3s;
animation-fill-mode: backwards;
}
/*Animations*/
#keyframes scroll {
0% {
background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png);
}
100% {
background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png);
background-position: 0px -3000px;
}
}
#keyframes popUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(-80px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<div class="row">
<div class="col-lg-12">
<div class="banner opening">
<div class="opening">
<div class="textBox">
<img class="logo logo--animated" src="logo.png">
<h1>Title</h1>
<hr class="style-two">
<h4>Sub-Title</h4>
</div>
</div>
</div>
</div>
</div>
I implement a form with AngularJS (for adding a contact).
This form contains several fields.
The first field is a text for the LastName. When a text is entered the system checks in the database if the value already exists. If the value exists the system displays an error message with the different contacts with the same lastName:
I created a popover in order displays contact details with the event mouseover. I have problem for displaying the popover in the page.
The popover should be displayed in front of the next fields. But I don't know how to do that (even with the relative position).
Here my HTML code:
<div ng-show="ContactForm.username.$dirty && alreadyExist=='true' " class="alert alert-info" role="alert" style="margin-top:10px; position:relative">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Last Name already exists:
<ul id="contacts_list">
<li ng-repeat=" cont in contacts" style="position:relative">
<div angular-popover direction="right" template-url="template/popover.html" mode="mouseover">
{{ cont.lastname }} {{ cont.firsttname }}
</div>
</li>
</ul>
</div>
And the CSS:
.angular-popover-container {
position: absolute;
width: 0;
height: 0;
left: 0
}
.angular-popover {
position: absolute;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, .2);
background-color: #fff
}
.angular-popover-template {
padding: 10px;
}
.popover-floating-animation-top {
animation: floatingtop 3s .5s infinite;
-webkit-animation: floatingtop 3s .5s infinite
}
.popover-floating-animation-bottom {
animation: floatingbottom 3s .5s infinite;
-webkit-animation: floatingbottom 3s .5s infinite
}
.popover-floating-animation-left {
animation: floatingleft 3s .5s infinite;
-webkit-animation: floatingleft 3s .5s infinite
}
.popover-floating-animation-right {
animation: floatingright 3s .5s infinite;
-webkit-animation: floatingright 3s .5s infinite
}
#-webkit-keyframes floatingtop {
from,
to {
transform: translate(0, 0);
-webkit-transform: translate(0, 0)
}
60% {
transform: translate(0, -8px);
-webkit-transform: translate(0, -8px)
}
}
#-webkit-keyframes floatingbottom {
from,
to {
transform: translate(0, 0);
-webkit-transform: translate(0, 0)
}
60% {
transform: translate(0, 8px);
-webkit-transform: translate(0, 8px)
}
}
#-webkit-keyframes floatingright {
from,
to {
transform: translate(0, 0);
-webkit-transform: translate(0, 0)
}
60% {
transform: translate(8px, 0);
-webkit-transform: translate(8px, 0)
}
}
#-webkit-keyframes floatingleft {
from,
to {
transform: translate(0, 0);
-webkit-transform: translate(0, 0)
}
60% {
transform: translate(-8px, 0);
-webkit-transform: translate(-8px, 0)
}
}
.hide-popover-element {
display: none
}
.angular-popover-triangle {
width: 30px;
height: 30px;
position: relative;
overflow: hidden;
box-shadow: 0 6px 10px -17px rgba(0, 0, 0, .2)
}
.angular-popover-triangle:after {
content: "";
position: absolute;
width: 15px;
height: 15px;
background: #fff;
transform: rotate(45deg);
box-shadow: 0 0 7px 1px rgba(0, 0, 0, .2)
}
.angular-popover-triangle-top:after {
top: -8.5px;
left: 7px
}
.angular-popover-triangle-bottom:after {
top: 23.5px;
left: 7px
}
.angular-popover-triangle-right::after {
top: 7.5px;
left: 23.5px
}
.angular-popover-triangle-left::after {
top: 7.5px;
left: -8.5px
}
ul#contacts_list {
width: 200px;
margin-top:20px;
}
ul#contacts_list li {
width: 200px;
list-style-type: none;
padding: 6px 10px;
}
li:hover {
background: #EEE;
}
Could you please help me to solve that?
Regards
The problem was due to the parameter z-index not correctly defined. All is ok now.