CSS
Showing posts with label css. Show all posts
Showing posts with label css. Show all posts
Sunday, July 3, 2022
Monday, January 24, 2022
[css] Picture Animation
Old
=========================================================================
position: absolute;
overflow: hidden;
background-image:url("assets/bg_1.jpg");
background-image:url("assets/bg_2.jpg");
background-image:url("assets/bg_3.jpg");
background-image:url("assets/bg_afternoon_1.jpg");
/*animation:fadeInOut 360s linear 2s infinite alternate;*/
/*animation: example 5s linear 2s infinite alternate;*/
animation-name: fadeInOut;
animation-duration: 360s;
animation-timing-function: ease-in-out; /*linear;*/
animation-delay: 0s;
animation-iteration-count: infinite;
/*animation-direction: alternate; */
}
@keyframes fadeInOut {
0% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_1.jpg");}
11% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_2.jpg");}
22% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_3.jpg");}
33% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_afternoon_1.jpg");}
44% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_afternoon_2.jpg");}
55% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_afternoon_3.jpg");}
66% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_afternoon_4.jpg");}
77% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_afternoon_5.jpg");}
88% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_afternoon_6.jpg");}
100% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_1.jpg");}
}
=========================================================================
New
=========================================================================
overflow: hidden;
background-image:url("assets/bg_1.jpg"),
url("assets/bg_2.jpg"),
url("assets/bg_3.jpg"),
url("assets/bg_afternoon_1.jpg"),
url("assets/bg_afternoon_2.jpg"),
url("assets/bg_afternoon_3.jpg"),
url("assets/bg_afternoon_4.jpg"),
url("assets/bg_afternoon_5.jpg"),
url("assets/bg_afternoon_6.jpg");
animation: fadeInOut 360s ease-in-out 0s infinite;
/*animation:fadeInOut 360s linear 2s infinite alternate;*/
/*animation: example 5s linear 2s infinite alternate;*/
//animation-name: fadeInOut;
//animation-duration: 360s;
//animation-timing-function: ease-in-out; /*linear;*/
//animation-delay: 0s;
//animation-iteration-count: infinite;
/*animation-direction: alternate; */
}
@keyframes fadeInOut {
0% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_1.jpg");}
11% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_2.jpg");}
22% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_3.jpg");}
33% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_afternoon_1.jpg");}
44% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_afternoon_2.jpg");}
55% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_afternoon_3.jpg");}
66% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_afternoon_4.jpg");}
77% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_afternoon_5.jpg");}
88% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_afternoon_6.jpg");}
100% {Transition: background-image 1s ease-in-out;
background-image:url("assets/bg_1.jpg");}
}
=========================================================================
However, MDN spec [2]
*doesn't* indicate {{background-image}} is an *animatable* property. So it
might be better to use CSS animation with another property e.g. {{opacity}}.
Also, from browser perspective, every operation setting
the background-image will trigger a repaint which is expensive in rendering.
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Thursday, December 16, 2021
Sunday, June 20, 2021
[CSS] position: absolute
<style>
body {
background-color: khaki;
font-family: Helvetica;
}
.box-before {
position: absolute;
width: 40px;
height: 40px;
color: white;
font-size: 16px;
background-color: #2f5ec2;
z-index:4;
}
.box-1 {
position: absolute;
width: 400px;
height: 100px;
padding: 10px;
color: white;
font-size: 70px;
background-color: #fd3c40;
box-sizing: border-box;
z-index:3;
}
.box-2 {
position: absolute;
height: 100px;
top: 20px;
left: 70px;
color: white;
font-size: 20px;
background-color: #8c4fb6;
z-index:2;
}
.box-3 {
position: absolute;
height: 300px;
width: 80px;
color: white;
font-size: 20px;
background-color: #00b842;
z-index:1;
}
.box-after {
position: absolute;
width: 800px;
height: 600px;
color: white;
font-size: 220px;
background-color: #faaa20;
z-index:0;
}
</style>
<body>
<div class="box-before">
blue
</div>
<div class="box-1">
red
<div class="box-2">
purple
</div>
<div class="box-3">
green
</div>
</div>
<div class="box-after">
Orange
</div>
</body>
Subscribe to:
Posts (Atom)