Is there a way to make a transition happen for a box-shadow on page load instead of with a hover or click effect?
The transition I want on page load, or as an event:
.item:hover{
margin:0 auto;
box-shadow: 1px 1px 20px grey;
transition: 0.7s;
max-width: 940px;
color: dimgrey;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 10px 10px 10px 10px;
}
- you can name
keyframes
a name and provide the time you need, I have provided4sec
in the example.- It says change the background color from
red
toyellow
and increase theheight
by200px
and animate this for 4 seconds.
.item { height: 100px; width: 100px; background-color: blue; animation-name: animate; animation-duration: 4s; border-radius: 10px; } @keyframes animate { from { background-color: red; } to { background-color: yellow; height: 200px; } }
<div class="item"> </div>
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.