I have got a modal sliding up with key frames. I wanted the background rgba I have in the overlay to kick in straight away when the modal starts sliding up but unable to make it work. Here is my code:
.overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
}
.modal{
margin: auto;
position: fixed;
overflow: scroll;
height: 100%;
animation: slidein 0.3s;
}
#keyframes slidein {
0% {
transform: translateY(400px);
animation-timing-function: ease-out;
}
60% {
transform: translateY(20px);
animation-timing-function: ease-in;
}
80% {
transform: translateY(10px);
animation-timing-function: ease-out;
}
100% {
transform: translateY(0px);
animation-timing-function: ease-in;
}
}
Any help would be appreciated
Probably it is not working because you added height:100%and probably the parent of you overlay has not a fixed height set. Try this insteed:
.overlay {
background-color: rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
}
Related
How to clip a div with svg?
Following is the code for a css animation:
.liquid {
position: absolute;
top: -80px;
left: 0;
width: 200px;
height: 200px;
background: #4973ff;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
transition: 0.5s;
}
.liquid::after,
.liquid::before {
content: "";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -75%);
background: #000;
}
.liquid::before {
border-radius: 45%;
background: rgba(20, 20, 20, 1);
animation: animate 5s linear infinite;
}
.liquid::after {
border-radius: 40%;
background: rgba(20, 20, 20, 0.5);
animation: animate 10s linear infinite;
}
#keyframes animate {
0% {
transform: translate(-50%, -75%) rotate(0deg);
}
100% {
transform: translate(-50%, -75%) rotate(360deg);
}
}
<div class="liquid"></div>
How can I embed/ clip the above animation inside a svg image?
Such that you will get a feeling of liquid filling the following image.
Following image :
https://www.flaticon.com/svg/vstatic/svg/3331/3331104.svg?token=exp=1619182384~hmac=11bada25343c186d8f2c99de7afec2f2
(Remember it should be svg)
Possibly this if I'm understanding right.
.element {
clip-path: url(#svgClipPathID);
}
This is a very good article about clip-path:
https://www.sarasoueidan.com/blog/css-svg-clipping/#:~:text=The%20clip%2Dpath%20property%20is%20used%20to%20specify%20a%20clipping,in%20the%20CSS%20Shapes%20module.
I have a fixed background image within a div that will not display consistently in mobile Safari. It displays fine when a page is refreshed, but the main issue arises when I try to prompt backward and forward to other site pages, which causes the browser to reposition the background's origin point awkwardly.
Note: The first image shows the background image displaying correctly, while the second image displays the transform-origin shift that occurs upon navigating back/forward in the Safari mobile browser, (the main issue).
Here's a snippet, for further reference:
body,
html {
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
body {
background: white;
margin: 0;
padding: 0;
border: 0;
outline: 0;
z-index: -2;
}
.sitebg {
background: url("http://maxpixel.freegreatpicture.com/static/photo/1x/Seamless-Repeating-Tiling-Tile-able-Tileable-1889447.jpg");
background-repeat: repeat;
background-position: center;
background-size: 720px 720px;
-webkit-animation: 180s rotatebg infinite linear;
-moz-animation: 180s rotatebg infinite linear;
-o-animation: 180s rotatebg infinite linear;
-ms-animation: 180s rotatebg infinite linear;
animation: 180s rotatebg infinite linear;
width: 750px;
height: 750px;
position: fixed;
top: 50%;
left: 50%;
}
.sitebg-parent {
position: absolute;
height: 100%;
width: 100%;
margin: auto;
padding: 0;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
#-webkit-keyframes rotatebg {
0% {
-webkit-transform: rotate(0deg) translate(-50%, -50%);
-webkit-transform-origin: top left;
}
100% {
-webkit-transform: rotate(360deg) translate(-50%, -50%);
-webkit-transform-origin: top left;
}
}
#keyframes rotatebg {
0% {
transform: rotate(0deg) translate(-50%, -50%);
transform-origin: top left;
}
100% {
transform: rotate(360deg) translate(-50%, -50%);
transform-origin: top left;
}
}
<body>
<div class="sitebg-parent">
<div class="sitebg"></div>
</div>
</body>
Please try the code below.
I've slightly changed your code and removed unnecessary and ivalid css rules.
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
.sitebg {
position: absolute;
top: 50%; left: 50%;
width: 2000px; height: 2000px;
margin: -1000px 0 0 -1000px;
background: url("http://s3.gomedia.us/wp-content/uploads/2008/06/skullbg-green.gif");
transform-origin: 50% 50%;
-webkit-animation: 180s rotatebg infinite linear;
animation: 180s rotatebg infinite linear;
}
.sitebg-parent {
position: absolute; z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
}
#-webkit-keyframes rotatebg {
0% {-webkit-transform: rotateZ(0deg)}
100% {-webkit-transform: rotateZ(360deg)}
}
#keyframes rotatebg {
0% {transform: rotateZ(0deg)}
100% {transform: rotateZ(360deg)}
}
<body>
<div class="sitebg-parent">
<div class="sitebg"></div>
</div>
</body>
I want to create a animation for a man playing drums(Dhol). So I cannot understand how to rotate hand end only on drum. Please see my Fiddle here
My html:
<div class="man_body"></div>
<div class="man_hand"></div>
<div class="man_shadow"></div>
My css:
.man_body {
position:absolute;
height:225px;
width: 137px;
background-image:url('http://i60.tinypic.com/2ag7uwk.png');
z-index:1;
}
.man_hand {
width:37px;
height:96px;
background-image:url('http://i61.tinypic.com/2ntfmdh.png');
position:absolute;
z-index:2;
left:30px;
top:65px;
-webkit-animation-name: man_hand-rotate;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear; /* Just another timing function */
-webkit-animation-direction: alternate; /* Lets do in alternate fashion */
}
#-webkit-keyframes man_hand-rotate {
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(50deg);}
}
You would need to adjust the transform-origin point about which the rotation occurs. By default this is the center point of the element.
I've appoximated at:
transform-origin:center top;
but you can adjust this to suit.
Note: I've adjusted the position of the 'arm` slightly and set the rotattion to 15deg on both keyframes (as these were different in your original code).
.drumer {
position: absolute;
width: 100%;
height: 350px;
overflow: hidden;
}
.man_body {
position: absolute;
height: 225px;
width: 137px;
background-image: url('http://i60.tinypic.com/2ag7uwk.png');
z-index: 1;
}
.man_hand {
width: 37px;
height: 96px;
background-image: url('http://i61.tinypic.com/2ntfmdh.png');
position: absolute;
z-index: 2;
left: 33px;
top: 65px;
transform-origin: center top;
-webkit-animation-name: man_hand-rotate;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
/* Just another timing function */
-webkit-animation-direction: alternate;
/* Lets do in alternate fashion */
}
/* Chrome / Safari */
#-webkit-keyframes man_hand-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(15deg);
}
}
/* Old Firefox */
#-moz-keyframes man_hand-rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(15deg);
}
}
/* new Firefox & supporting broswers */
#keyframes man_hand-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(15deg);
}
}
.man_shadow {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
top: 227px;
box-shadow: -5px 10px 45px 2px #000000;
left: 7px;
position: absolute;
width: 136px;
}
<div class="man_body"></div>
<div class="man_hand"></div>
<div class="man_shadow"></div>
Hy
I have this theme.
http://venusdemo.com/wpopal/mix/fashion/
On the right side there are a few images that have an effect when we arrow above.
Thnaks in advance!
Does anyone know what kind of plug is used there or how were they created?
.image-plus-1:hover:before, .wpb_single_image .wpb_wrapper > a:hover:before {
opacity: 0.6;
transform: scale(1) rotateY(0deg);
visibility: visible;
}
.image-plus-1:before, .wpb_single_image .wpb_wrapper > a:before {
background: url("../images/plus.png") no-repeat scroll center center / 60px 60px rgba(0, 0, 0, 0.6);
content: "";
height: 100%;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
top: 0;
transform: scale(0.5) rotateY(180deg);
transition: all 0.3s ease 0s;
width: 100%;
z-index: 100;
}
I have a few divs in a container:
<div class="waves-container" id="waves_container">
<div class="wave-wrapper wave-back">
<img src="static/images/waves/sea_back.png" class="wave-top" />
<div class="wave-bottom"></div>
</div>
<div class="wave-wrapper wave-front">
<img src="static/images/waves/sea-front.png" class="wave-top" />
<div class="wave-bottom" id="wave_bottom_front">Some additional divs are created here dynamically with JS</div>
</div>
<div class="play-button" id="play_button">
<img src="static/images/ccs_shake_waves/play.png" />
</div>
</div>
Their CSS:
.waves-container {
width: 100%;
height: 50%;
position: absolute;
bottom: -35%;
-webkit-transition: bottom 0.4s ease-in-out;
}
.wave-wrapper {
width: 105%;
height: 130%;
position: absolute;
left: -5%;
}
.wave-top {
width:100%;
height: auto;
position:relative;
bottom: 0;
left: 0;
float: left;
}
.wave-bottom {
width: 100%;
height: 130%;
position: relative;
clear:both;
float: left;
background-color: #fd51df;
}
.wave-back {
-webkit-animation: wave 3s 1s infinite linear;
top: 1.5%;
}
.wave-front {
top: -12%;
-webkit-animation: wave 3s infinite linear;
}
.play-button {
width: 70%;
height: auto;
position: relative;
margin: 0 auto;
top: 50%;
-webkit-transform: translateY(-50%) scale(0, 0);
z-index:1;
display: none;
}
With JS on a certain event I'm attaching an animation class to #play_button:
.pop-play {
-webkit-animation: flipInY 1s 1 forwards ease-out, play 3s 1s infinite linear;
}
In flipInY I'm animating this div on Y axis:
#-webkit-keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg) translateY(-50%);
-webkit-transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg) translateY(-50%);
-webkit-transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg) translateY(-50%);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg) scale(1.05, 1) translateY(-50%);
}
100% {
-webkit-transform: perspective(400px) scale(1.1, 1) translateY(-50%);
-webkit-transition-timing-function: ease-out;
}
}
In Android I see it just fine. However in iOS the play_button div overlaps with underlying div when it flips on Y axis, so every time I see 50% of the image, the rest of that div is "under" another div.
I tried to add -webkit-transform: translate3d(0,0,0); to every underlying div, tried to change z-indexes, tried to combine it, tried to use
-webkit-perspective: 1000;
-webkit-transform-style: preserve-3d;
on the waves-container div and all the child divs, but they're still overlapping, until the flipping animation finishes and the other begins.
Why is it happening and how can I fix it?