I'm having some issues in scaling into my background image.
The issue is:
Horizontal and vertical scroll bars appear when the scaling happens. I removed the childDiv, thinking that could be it, but no luck.
Also tried setting a max-height and max-width however didnt help.
Its almost as if as the image is increasing in width and height, rather than being zoomed into.
My code looks like:
/* Chrome, Safari, Opera */
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(1, 1);
}
to {
-webkit-transform: scale(1.2, 1.2);
}
}
/* Standard syntax */
#keyframes zoom {
from {
transform: scale(1, 1);
}
to {
transform: scale(1.2, 1.2);
}
}
.homeDivParent {
height: 100%;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(100, 100, 100, 0.1)), url("/assets/images/bgHome.jpg");
background-position: 20% 0%;
background-color: #fafafa;
-webkit-animation: zoom 10s;
animation: zoom 10s;
}
.homeDivChild {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="homeDivParent">
<div class="homeDivChild">
Some Text
</div>
</div>
I don't know if I unterstand it right, but I think you want to remove the scroll bars, right?
.homeDivParent {
overflow: hidden;
}
Related
I've set up a background for my page using css-doodle. It looks fine when on full screen but because of the way my grid is set up, the shapes get smaller along with the screen and are completely invisible on split screen or when simulating mobile devices. I would like them to visually always be the same size.
Here's a media query that I tried adding but it doesn't seem to do anything. (I'm fairly new to RWD so I'm not sure what the issue is.)
#media only screen and (max-width: 600px) {
.doodle {
grid: 22 / 100vmax;
grid-gap: 20px;
}
}
And here's my CSS-Doodle code.
<css-doodle grid="5" class="doodle">
:doodle {
#grid: 50 / 100vmax;
grid-gap: 30px;
}
background: white;
opacity: #r(-1, .08);
clip-path: polygon(51% 26%, 0% 100%, 100% 100%);
</css-doodle>
Using the example of the docs, I tried using em units instead of vmax. Codepen Demo
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background: linear-gradient(to bottom, rgb(8, 36, 83), rgb(2, 91, 137));
}
.doodle {
position: fixed;
z-index: -1;
animation: spin 200s infinite;
}
#keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#media only screen and (max-width: 600px) {
.doodle {
#grid: 25 / 100em;
grid-gap: 20px;
}
}
<css-doodle grid="5" class="doodle">
:doodle {
#grid: 50/100em;
grid-gap: 30px;
}
background: white;
opacity: #r(-1, .08);
clip-path: polygon(51% 26%, 0% 100%, 100% 100%);
animation: flow #r(10s, 50s) infinite linear;
#keyframes flow {
0%, 100%{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
50% {
-webkit-transform: translate3d(#r(-500%, 1000%), #r(-500%, 1000%), 0);
transform: translate3d(#r(-500%, 1000%), #r(-500%, 1000%), 0);
}
}
</css-doodle>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.7.1/css-doodle.js"></script>
I try to do an animated box that will unfold itself on the page load.
I have a panel lifted up. I try to rotate it 90deg to the ground, and after, I would want to lift it up again based on the other edge 90deg.
I tried to change the origin (transform-origin: top) but it change the origin to the original origin. I had to add 2 translation to position it at the right place but it create a bump. The edge on the ground don't stick on the ground.
Here's my current fiddle: https://jsfiddle.net/hbnta1uj/2/
I also tried without modifying the origin but I still get a bump:
#keyframes slideFront2 {
0% {
transform: rotateX(-0deg);
}
50% {
transform: rotateX(-90deg);
}
100% {
transform: rotateX(-180deg) translateZ(-100px) translateY(100px);
}
}
I have another idea where I position the second panel flat already and I hide it (opacity 0) and at 50% when the first panel is flat I show the second and just 90deg it.
But I would want to know for more complex animations if there's a way to do it the way I describe it, by always start at the new position the new transformation?
Thanks
I would consider an animation on the container to make it easier where you only need one keyframe:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.container {
width: 90%;
margin: auto;
height: 100vh;
background-color: rgb(194, 194, 194);
}
.progressbar-wrapper {
width: 300px;
height: 100px;
top: calc(50% - 50px);
left: calc(50% - 150px);
position: absolute;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(-30deg);
}
.progressbar {
width: 100%;
height: 100%;
transform-origin: bottom;
animation: 0.5s ease-out 1 slideFront forwards;
transform-style: preserve-3d;
}
.side {
width: 100%;
height: 100%;
background-color: rgba(254, 254, 254, 0.3);
position: absolute;
top: 0;
left: 0;
}
#keyframes slideFront {
100% {
transform: rotateX(-90deg);
}
}
.bottom {
box-shadow: 10px 10px 50px 5px rgba(90, 90, 90, 0.7);
}
.back {
animation: 1s ease-out 0.5s 1 slideFront forwards;
transform-origin: top;
}
<div class="container">
<div class="progressbar-wrapper">
<div class="progressbar">
<div class="side back">
</div>
<div class="side bottom">
</div>
</div>
</div>
</div>
The thing I discover is that the order matter in the translate function. Everything is executed left to right so the origin of the rotation will be relative to the current position of the element if you execute everything left to right (Here's 2 boxes getting the same rotation translation but the order differ: https://codepen.io/anon/pen/oOQGPp)
So in my example, if you do:
50.001% {
transform: rotateX(90deg) translateZ(00px) translatey(100px) ;
transition-timing-function: linear;
}
100% {
transform: rotateX(0deg) translateZ(100px) translatey(00px) ;
transition-timing-function: linear;
}
The rotation will be applied before the translation so the rotation origin will not be the bottom line after the translation but it will be the position without the origin based on the translated part (So it will be the 0% position origin.) CSS will fail to make the path of the animation and it will add a little bump.
But if you do transform: TRANSLATE ROTATE, the rotation will be applied after the translation so the origin of the rotation will be related to the position with the translation. This is how I was able to rotate the item without getting the little bump bug.
Here's the full fixed css. You can run it in my original jsfiddle to see the result
* {
box-sizing: inherit;
margin: 0;
}
html {
box-sizing: border-box;
}
.container {
width: 90%;
margin: auto;
height: 100vh;
background-color: rgb(194, 194, 194);
}
.progressbar-wrapper {
width: 300px;
height: 100px;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.progressbar {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(-30deg);
}
.side {
width: 100%;
height: 100%;
background-color: rgba(254, 254, 254, 0.3);
position: absolute;
top: 0;
left: 0;
}
#keyframes slideBottom {
0% {
transform: rotateX(-0deg);
}
100% {
transform: rotateX(-90deg);
}
}
#keyframes slideFront {
0% {
transform: rotateX(-0deg);
}
50% {
transform: rotateX(-90deg);
}
50.001% {
transform: translateZ(100px) rotateX(90deg);
transition-timing-function: linear;
}
100% {
transform: translateZ(100px) rotateX(0deg) ;
transition-timing-function: linear;
}
}
.bottom {
animation: 0.5s ease-out 0s 1 slideBottom forwards;
box-shadow: 10px 10px 50px 5px rgba(90, 90, 90, 0.7);
transform-origin: bottom;
}
.back {
animation: 1s ease-out 0s 1 slideFront forwards;
transform-origin: bottom;
}
This is my code:
.arrow
{
position: relative;
bottom: -2rem;
left: 50%;
margin-left:-20px;
width: 40px;
height: 40px;
/**
* Dark Arrow Down
*/
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojMjIyMjIyO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPg==);
background-size: contain;
}
.bounce {
animation: bounce 2s infinite;
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
The image in the background image is black. I want to change the color of this image. Can I add an overlay or something? Or do I have to create a new svg+xml;base64 image? Beacause I do not know how to do this.
You can't do this. You will have to create another image.
I have a small horizontal notification bar that slides up from the bottom of the page.
It comes up fine, but when you open up the page it quickly flashes, then disappears and then slides up.
How do I modify it so it doesn't appear/disappear before the transition takes place?
#notificationBarBottom {
position: fixed;
z-index: 101;
bottom: 0;
left: 0;
right: 0;
background: #5cb85c;
color: #ffffff;
text-align: center;
line-height: 2.5;
overflow: hidden;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}
#-webkit-keyframes slideDown {
0%, 100% {
-webkit-transform: translateY(0px);
}
10%,
90% {
-webkit-transform: translateY(510px);
}
}
#-moz-keyframes slideDown {
0%, 100% {
-moz-transform: translateY(0px);
}
10%,
90% {
-moz-transform: translateY(510px);
}
}
.cssanimations.csstransforms #notificationBarBottom {
-webkit-transform: translateY(510px);
-webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
-moz-transform: translateY(510px);
-moz-animation: slideDown 2.5s 1.0s 1 ease forwards;
}
<div id="notificationBarBottom">Hello, human!</div>
Jsfiddle demo here: https://jsfiddle.net/cnfk36jd/ (but unfortunately the problem is not visible there). Here's the page where you can see the "flickering" http://www.whycall.me/bannerTest.html
I tried the advice here: https://css-tricks.com/pop-from-top-notification/ and tweaked the translateY values quite a bit, but it doesn't help, not sure what else to do.
Thank you for your help
The elements initial position is visible, and then, during page load, the first translate kicks in to hide it, hence it flickers.
Do like this, push it out of view using transform: translateY(calc(100% + 10px)); and then slide it up with transform: translateY(0));.
I used 100% instead of -510px to make it height independent, and added 10px to make up for the top shadow.
I also temporary removed the prefixed properties, so you need to add them back
Updated 2021: Updated answer, improved the code suggestion, and, based on a comment, added how to make it hide using a click
document.getElementById('notificationBarBottom').addEventListener('click', function() {
this.classList.add('hideMe');
})
#notificationBarBottom {
position: fixed;
z-index: 101;
bottom: 0;
transform: translateY(calc(100% + 10px));
left: 0;
right: 0;
background: #5cb85c;
color: #ffffff;
text-align: center;
line-height: 2.5;
overflow: hidden;
box-shadow: 0 0 5px black;
}
#keyframes slideUp {
0% { transform: translateY(100% + 10px); }
100% { transform: translateY(0); }
}
#notificationBarBottom {
animation: slideUp 2.5s ease forwards;
}
#close {
display: none;
}
/* added to show how to hide with a click */
#keyframes slideDown {
0% { transform: translateY(0); }
100% { transform: translateY(100% + 10px); }
}
#notificationBarBottom.hideMe {
animation: slideDown 2.5s ease forwards;
}
<div id="notificationBarBottom">Hello, human!</div>
I think this is happening because the css file in which you've written this code is called a bit too late.
In your html page, try calling this css file earlier than other css or JS files
I'm trying to animate the 'transform: scale' property of a ::before pseudo element from scale(1) to scale(1.1), which is meant to be the animated background of a div which covers the whole viewport. The background-size is set to 'cover' and displays correctly on page load, but when the animation kicks in after a short delay, the background shrinks to about 50% of the viewport. Everything works as expected in Safari, Chrome and Opera (on Mac), but on Firefox (Mac) the behaviour is as described above. On top of that, when resizing the browser window down to a smaller size, everything displays fine again, so to see the issue in Firefox, the browser window needs to be at least wider than about 1000px.
Example below (jsfiddle: http://jsfiddle.net/YuY4U/embedded/result/).
html:
<!DOCTYPE html>
<html>
<head>
<title>Animation Test Case</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div>This is a div</div>
</body>
</html>
css:
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow: hidden;
}
div {
width: 100%;
height: 100%;
}
div::after {
background: url("http://fineartamerica.com/images-simple-print/images-medium/33-landscape-odon-czintos.jpg") top center no-repeat;
background-size: cover;
content: "";
display: block;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: -2;
-moz-animation: bg-anim 10s linear 2s infinite;
-webkit-animation: bg-anim 10s linear 2s infinite;
-moz-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
#-moz-keyframes bg-anim {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(1.1);
transform: scale(1.1);
}
}
#-webkit-keyframes bg-anim {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
#keyframes bg-anim {
0% {
-moz-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
I've tried changing the background-size property to a percentage value, but it didn't fix the problem and is not really a solution for my project. I've also tried changing the scale values to 1 and 0.9, which works fine, but then the background doesn't cover the whole viewport which is not acceptable for my situation either.
Any ideas on how to work around this issue? Have I missed something obvious or could this be a browser bug or browser-specific implementation discrepancy even?