Prevent animated background image in pseudo ::before element from being cropped
Question
I am trying to have the background image of a div animate in scale and rotation, and have semi-achieved this using a pseudo ::before element of the div, and having the background image on that element. The problem is that I can't seem to get the text in the orginal div to present in front of the animated background, and also i am having weird issues with the graphic being cropped to the dimensions of the final div size.
Its hard to explain but you can more easily see in my demonstration jsfiddle here!
Here is my html:
<body>
<div id="box">
<h1>I want this title to stay in the foreground</h1>
</div>
</body>
And here is my css:
body {
background-color:#333;
}
#box {
z-index:2;
width:700px;
height:200px;
border:3px solid #e7f26d;
position:relative;
text-align:center;
color:#000;
}
#box * {
z-index:2;
}
#box::before {
content:"";
z-index:1;
position:absolute;
top:0;bottom:0;left:0;right:0;
background-image:url('https://www.picpng.com/image/view/110525');
background-image:no-repeat;
background-position:center;
-webkit-animation:grow-rotate 4s linear normal;
}
@-webkit-keyframes grow-rotate {
0% {transform: rotate(320deg) scale(0);}
100% {transform: rotate(360deg) scale(0.2);}
}
The multiple problems i am trying to solve are:
1. MAIN PROBLEM Prevent the background graphic form being cropped. The image is a spiral/circular, and i want to see the full spiral until it reaches the edges of its parent. So, ultimately it does get cropped when it reaches the container div boundaries, but not whilst it's scaling up. Is this even possible? I have tried various combinations of overflow properties, but i must have position:relative on the #box div.
2. Does the final degree of rotation have to be its finishing point? i only want to turn the image about 40 degrees from start to finish, but i don't want a sudden jump at the end to its starting point, hence why i start the rotation at 320deg and finish at 360deg, so there isn't a sudden jump at the end. Albeit this isn't working here either.For some reason its jumping at the end to full scale.
3. keep the h1 title text in front of the background graphic
Apologies if this is too many problem points for one question. Number 1 is my primary problem right now. Thank you to anyone who may be able to help me figure some of this out.
1 answers
solution1
2 ACCPTED 2018-01-23 05:34:10
Here is the solution
Cropping Issue :
Try to make the :before element to square using top and bottom negative values and use background-size:contain (It will remove your cropping issue)
Heading Issue :
Set z-index:-1 to the :before pseudo class.
Jumping Issue
Set your animation-fill-mode: forwards
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.