I wish to have two modal windows hidden, and toggle them to slide in from the left, and another to slide in from the right.
In the fiddle I have created, the left, and right, modal windows align correctly to the left and right of the page, however. The left modal slides in from right instead of sliding "out" from the left margin.
Fiddle Here
When I try to have the left modal window slide from the left, I lose the slide-out effect.
#rightModal .modal-dialog-slideout {
min-height: 100%;
margin: 0 0 0 auto;
background: #fff;
}
#rightModal .modal.fade .modal-dialog.modal-dialog-slideout {
-webkit-transform: translate(100%, 0)scale(1);
transform: translate(100%, 0)scale(1);
}
#rightModal .modal.fade.show .modal-dialog.modal-dialog-slideout {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
display: flex;
align-items: stretch;
-webkit-box-align: stretch;
height: 100%;
}
#rightModal .modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
overflow-y: auto;
overflow-x: hidden;
}
#rightModal .modal-dialog-slideout .modal-content {
border: 0;
}
#rightModal .modal-dialog-slideout .modal-header,
.modal-dialog-slideout .modal-footer {
height: 69px;
display: block;
}
#rightModal .modal-dialog-slideout .modal-header h5 {
float: left;
color: blue;
}
#leftModal .modal-dialog-slideout {
min-height: 100%;
margin: 0 auto 0 0;
background: #fff;
}
#leftModal .modal.fade .modal-dialog.modal-dialog-slideout {
-webkit-transform: translate(-100%, 0)scale(1);
transform: translate(-100%, 0)scale(1);
}
#leftModal .modal.fade.show .modal-dialog.modal-dialog-slideout {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
display: flex;
align-items: stretch;
-webkit-box-align: stretch;
height: 100%;
}
#leftModal .modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
overflow-y: auto;
overflow-x: hidden;
}
#leftModal .modal-dialog-slideout .modal-content {
border: 0;
}
#leftModal .modal-dialog-slideout .modal-header,
.modal-dialog-slideout .modal-footer {
height: 69px;
display: block;
}
#leftModal .modal-dialog-slideout .modal-header h5 {
float: left;
color: red;
}
How to maintain the slide-out effect, and maintain positions of the two modals?
You need to translate .modal-dialog -100% on the x-axis when the modal is not shown.
The modal has .show class when it is displayed. Use the :not() CSS pseudo-class to select the modal in its hidden state.
The :not() CSS pseudo-class represents elements that do not match a
list of selectors. Since it prevents specific items from being
selected, it is known as the negation pseudo-class. - https://developer.mozilla.org
#leftModal.modal.fade:not(.show) .modal-dialog.modal-dialog-slideout {
-webkit-transform: translate(-100%,0)scale(1);
transform: translate(-100%,0)scale(1);
}
https://jsfiddle.net/r25uphq3/
Related
I want to start a animtion on click of a div and after the animtion is done it just keeps it position. I fixed the anitmtion that i works on reloading the page but didnt fix it for onclick do you guys have an idea??
.tsx file:
import styles from "./WaterTracker.module.css";
export default function WaterTracker() {
return (
<div className={styles.mainContainer}>
<div className={styles.wrapper}>
<div className={styles.mainContent}></div>
</div>
</div>
);
}
.css file :
:root {
--background: #f8f8f8;
--dark: #303032;
}
.mainContainer {
box-sizing: border-box;
margin: 0 0;
padding: 0 0;
}
.wrapper {
background: var(--background);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.mainContent {
position: relative;
background: var(--dark);
border: 0.25em solid var(--dark);
height:8rem;
width: 8rem;
outline: 0.25;
overflow: hidden;
}
.mainContent::before {
content: "Drink je water";
font-size: 2rem;
color: white;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.mainContent::after {
content: "";
position: absolute;
background: var(--background);
height: 200%;
width: 200%;
bottom: -50%;
left: -50%;
border-radius: 45%;
animation: spin 6s ease-in-out forwards;
}
#keyframes spin {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(-100%) rotate(500deg);
}
}
I hope that when this works i also can change the tranlateY from -100% to any number with a button so the animtion will first go to -50% and when i click on the button to -100% if you guys have a fix for this as whel it would be nice
You can use Ionic's Animation. Check out the docs for examples. https://ionicframework.com/docs/utilities/animations
Why a mouse over transition in one image causing a jitter in nearby images?
The images are large and fits in the div with width:100%.
Observed the issue in chrome.
.post:hover figure img {
transform: scale(1.03);
}
.post img {
transition: all cubic-bezier(.4,0,.2,1) .3s;
transform: scale(1);
}
/* Main Div css start here */
.slide_Wrapper {
display: flex;
}
/* This is for child div */
.slide {
width: 290px;
height: 160px;
overflow: hidden;
background: #000;
margin:10px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
border-radius: 10px;
}
/* This is for child div border */
.slide::after {
content: "";
position: absolute;
width: 90%;
height: 82%;
border: 2px solid #fff;
left: 50%;
top: 50%;
z-index: 2;
transform: translate(-50%,-50%);
}
/* Background images */
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all cubic-bezier(.4,0,.2,1) .3s;
transform: scale(1);
position: absolute;
}
/* Background images on hover */
.slide:hover img {
transform: scale(1.2);
}
/* Text */
.slide h2{
position: relative;
z-index: 2;
color: #fff;
}
<!-- Here I create a main div and two child div -->
<div class="slide_Wrapper">
<div class="slide">
<img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
<h2>XYZ</h2>
</div>
<div class="slide">
<img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
<h2>ABC</h2>
</div>
</div>
I'm learning about CSS animations and am trying to animate this stamp which uses relative and absolute positioning. I want the animation to:
Start at it's original size.
Grow 2-3xs that size and be at the center of the screen.
Pause for 2-3 seconds seconds.
Shrink back down to it's original size and spot.
The problem I'm running into is keeping the elements positioned on top of the stamp in the same place as the transitions occur. Looking to keep it pure CSS if possible (*side note I haven't added any web-kit/browser support yet because I'm just trying to make it work first).
Here is the code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
height: 90vh;
justify-content: flex-end;
align-items: flex-start;
background: grey;
}
.park-img {
width: 10rem;
height: 11.2rem;
display: inline-block;
margin-left: 2px;
padding: 10px;
background: white;
position: relative;
top: 2rem;
left: -2rem;
/*-webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
/*The stamp cutout will be created using crisp radial gradients*/
background: radial-gradient( transparent 0px, transparent 4px, white 4px, white);
/*reducing the gradient size*/
background-size: 20px 20px;
/*Offset to move the holes to the edge*/
background-position: -10px -10px;
/*Animation*/
animation: stampAnimation 9s ease-in-out;
}
#keyframes stampAnimation {
0% {}
50% {
transform: scale(3, 3) translate(-35%, 35%);
}
75% {
transform: scale(3, 3) translate(-35%, 35%);
}
}
.stampText {
position: relative;
top: -1rem;
left: -1.8rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fafafa;
text-transform: uppercase;
animation: stampAnimation 9s ease-in-out;
}
.park-name {
font-weight: bold;
text-align: center;
font-size: 1rem;
}
.park-title {
width: 90%;
overflow: hidden;
text-align: center;
font-size: .5rem;
}
.park-title:before,
.park-title:after {
background-color: #fafafa;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 10%;
}
.park-title:before {
right: 0.5rem;
margin-left: -50%;
}
.park-title:after {
left: 0.5rem;
margin-right: -50%;
}
<div class="park-stamp">
<img src="https://res.cloudinary.com/saveallthethings/image/upload/v1614633821/daniel-burka-X_IwSPO2GH0-unsplash_zvoyst.jpg" class="park-img" />
<div class="stampText">
<div class="park-name">Zion</div>
<div class="park-title">National Park</div>
</div>
</div>
As well as the codepen:
https://codepen.io/aspirationalhobbit/pen/GRNPqxw?editors=0100
I have edited your code to make changes that are different from my initial answer.
Check https://codepen.io/udabasili/pen/VwmqmQK?editors=1100.
Basically, I created a css for the container of your element and moved the animation there. I also removed the translate from your animation. Check the css in the codepen to see the changes
.park-stamp{
animation: stampAnimation 9s ease-in-out infinite;
}
I'm trying to make a 3D card flipping effect with CSS like this.
The difference is that I want to use only CSS to implement it.
Here is the code I tried:
/*** LESS: ***/
.card-container {
position: relative;
height: 12rem;
width: 9rem;
perspective: 30rem;
.card {
position: absolute;
width: 100%;
height: 100%;
div {
position: absolute;
height: 100%;
width: 100%;
}
.front {
background-color: #66ccff;
}
.back {
background-color: #dd8800;
backface-visibility: hidden;
transition: transform 1s;
&:hover {
transform: rotateY(180deg);
}
}
}
}
HTML:
<div class="card-container">
<div class="card">
<div class="front"><span>Front</span></div>
<div class="back"><span>Back</span></div>
</div>
</div>
The issue is that the card doesn't flip, it snaps from back to front like this:
Is it possible to implement this 3d card flip on hover effect using only CSS?
I simplified the code to make it shorter and make the 3d card flip on hover. The card flips on the Y axis from the front face to the back face this is what it looks like:
Here is an example of a simple CSS only flipping card the flip animation is launched on hover :
.card {
position: relative;
width: 50vh;
height: 80vh;
perspective: 500px;
margin: 10vh auto 50vh;
}
.front,
.back {
position: absolute;
width: 100%;
height: 100%;
transition: transform 1s;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.front {
background-color: #66ccff;
}
.back {
background-color: #dd8800;
transform: rotateY(180deg);
}
.card:hover .front {
transform: rotateY(180deg);
}
.card:hover .back {
transform: rotateY(360deg);
}
<div class="card">
<div class="front"><span>Front</span></div>
<div class="back"><span>Back</span></div>
</div>
Note that you will need to add vendor prefixes depending on the browsers you want to support. See canIuse for 3d transforms and transitions.
This is what I changed in your code for the flip effect:
the front face wasn't rotated on th Y axis on hover
the hover effect was launched when the .back div was hovered. This can create flickering as that div is rotating and "disapears" at mid rotation. It's better to launch the animation when the static parent is hovered.
the first parent isn't really usefull so I removed it
yes it can be done using CSS only and you can do by using CSS3 animation property. Here is example of flipping card animation.
<div class="container text-center">
<div class="card-container">
<div class="card">
<div class="front">
<span class="fa fa-user"></span>
</div>
<div class="back">User</div>
</div>
</div>
The CSS
.card-container {
display: inline-block;
margin: 0 auto;
padding: 0 12px;
perspective: 900px;
text-align: center;
}
.card {
position: relative;
width: 100px;
height: 100px;
transition: all 0.6s ease;
transform-style: preserve-3d;
}
.front, .back {
position: absolute;
background: #FEC606;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 5px;
color: white;
box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
backface-visibility: hidden;
}
.front {
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
}
.back {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.card-container:hover .card {
transform: rotateY(180deg);
}
.back {
transform: rotateY(180deg);
}
You can also read this article about CSS Flip Animation on Hover
You can also find demo and download source from the article.
I'm animating an element across a screen, but in IE11, weird things are happening. I'm in development, so I can't share the live code. But I created a fiddle to replicate the problem.
Basically, when I use viewport width aka vw with transform:translateX(); inside a #keyframes to use in an animation, IE11 doesn't reflect the width of the viewport in the animation.
So the Fiddle I created takes an element that is positioned in the center of the viewport:
starts it at the left edge of the screen with half of the element
appearing
moves to the center of the viewport, pauses
and then moves to the right edge of the viewport, with half the element off of the screen
Fiddle: https://jsfiddle.net/Bushwazi/7xe0wy8z/4/
In the website I'm working on, IE11 animates the element as if the
page were 10 times wider
In the fiddle, the animation runs in reverse
and never makes it to the edge of the page.
So in both cases, IE11 isn't using the correct width for vw inside CSS animations.
HTML:
<!--
The animation on the red block should start half on the screen, pause at the center of the screen and then finish by pausing at the edge of the screen, half of the box off of the screen
-->
<article>
<p>IE11 weirdness when transforming vw inside keyframes</p>
<strong><span>BLOCK</span></strong>
</article>
CSS:
* {
margin: 0;
padding: 0;
}
#-webkit-keyframes movee {
0% {
-webkit-transform: translateX(-50vw);
transform: translateX(-50vw)
}
10% {
-webkit-transform: translateX(-50vw);
transform: translateX(-50vw)
}
40% {
-webkit-transform: translateX(0vw);
transform: translateX(0vw)
}
60% {
-webkit-transform: translateX(0vw);
transform: translateX(0vw)
}
90% {
-webkit-transform: translateX(50vw);
transform: translateX(50vw)
}
100% {
-webkit-transform: translateX(50vw);
transform: translateX(50vw)
}
}
#keyframes movee {
0% {
-webkit-transform: translateX(-50vw);
transform: translateX(-50vw)
}
10% {
-webkit-transform: translateX(-50vw);
transform: translateX(-50vw)
}
40% {
-webkit-transform: translateX(0vw);
transform: translateX(0vw)
}
60% {
-webkit-transform: translateX(0vw);
transform: translateX(0vw)
}
90% {
-webkit-transform: translateX(50vw);
transform: translateX(50vw)
}
100% {
-webkit-transform: translateX(50vw);
transform: translateX(50vw)
}
}
body {
background-color: #eee;
background-image: -webkit-linear-gradient(left, black 50%, transparent 50.01%);
background-image: linear-gradient(90deg, black 50%, transparent 50.01%);
background-size: 20% 100%;
background-position: 0 0;
font-family: sans-serif;
height: 100vh;
}
article {
position: relative;
height: 100%;
width: 100%;
display: block;
}
p {
width: 100%;
background: #FFF;
text-align: center;
padding: 1em 0;
}
strong {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100px;
width: 100px;
background: red;
border: blue solid 3px;
position: absolute;
top: 50%;
left: 50%;
box-sizing: border-box;
text-align: center;
margin: -50px 0 0 -50px;
-webkit-animation: movee 5.0s linear infinite 0.0s;
animation: movee 5.0s linear infinite 0.0s;
}
According to caniuse:
In IE 10 and 11, using vw units with 3D transforms causes unexpected behavior
Although 2D & 3D transforms are different, it is likely that they are handled by simliar methods within a browser. So I would say that VW/VH/VMAX/VMIN are not supported in IE11 for transitions.
Is there any reason you don't want to use % ?
Like this:
* {
margin: 0;
padding: 0;
}
#-webkit-keyframes movee {
0% {
left: -1%;
}
10% {
left: -1%;
}
40% {
left: 50%;
}
60% {
left: 50%;
}
90% {
left: 101%;
}
100% {
left: 101%;
}
}
#keyframes movee {
0% {
left: -1%;
}
10% {
left: -1%;
}
40% {
left: 50%;
}
60% {
left: 50%;
}
90% {
left: 101%;
}
100% {
left: 101%;
}
}
body {
background-color: #eee;
background-image: -webkit-linear-gradient(left, black 50%, transparent 50.01%);
background-image: linear-gradient(90deg, black 50%, transparent 50.01%);
background-size: 20% 100%;
background-position: 0 0;
font-family: sans-serif;
height: 100vh;
}
article {
border: thin dotted green;
position: relative;
height: 100%;
width: 100%;
display: block;
}
p {
width: 100%;
background: #FFF;
text-align: center;
padding: 1em 0;
}
strong {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100px;
width: 100px;
background: red;
border: blue solid 3px;
position: absolute;
top: 50%;
left: 50%;
box-sizing: border-box;
text-align: center;
margin: -50px 0 0 -50px;
-webkit-animation: movee 5.0s linear infinite 0.0s;
animation: movee 5.0s linear infinite 0.0s;
}
<!--
The animation on the red block should start half on the screen, pause at the center of the screen and then finish by pausing at the edge of the screen, half of the box off of the screen
-->
<article>
<p>IE11 weirdness when transforming vw inside keyframes</p>
<strong><span>BLOCK</span></strong>
</article>
One posibility would be to use transform as percentages.
Since you want the amout of the transform to be 100vw, lets set an extra element with a width of 100vw. Now, the transform on this element is just 100%.
I had to use negative offsets to avoid the appearance of an undesired horizontal scrollbar
* {
margin: 0;
padding: 0;
}
#keyframes movee {
0% {
transform: translateX(-100%)
}
10% {
transform: translateX(-100%)
}
40% {
transform: translateX(-50%)
}
60% {
transform: translateX(-50%)
}
90% {
transform: translateX(0%)
}
100% {
transform: translateX(0%)
}
}
body {
background-color: #eee;
background-image: linear-gradient(90deg, black 50%, transparent 50.01%);
background-size: 20% 100%;
background-position: 0 0;
height: 100vh;
}
article {
position: relative;
height: 100%;
width: 100%;
display: block;
}
p {
width: 100%;
background: #FFF;
text-align: center;
padding: 1em 0;
}
.base {
width: 100vw;
animation: movee 5.0s linear infinite 0.0s;
top: 50%;
position: absolute;
height: 100px;
}
strong {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100px;
width: 100px;
background: red;
border: blue solid 3px;
position: absolute;
right: 0px;
top: 0px;
box-sizing: border-box;
text-align: center;
margin: -50px 0 0 -50px;
}
<article>
<p>IE11 weirdness when transforming vw inside keyframes</p>
<div class="base">
<strong><span>BLOCK</span></strong>
</div>
</article>