1

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;
}
Alexander Hemming
  • 753
  • 1
  • 6
  • 28
  • have you seen this https://stackoverflow.com/questions/11679567/using-css-for-a-fade-in-effect-on-page-load – Mohit Jun 06 '20 at 07:00
  • yes, i was a bit tired and think i thought the keyframes was only for movement and colour change, not for like creating a box-shadow onpageyoffset = 900 etc. – Alexander Hemming Jun 06 '20 at 07:32

1 Answers1

1
  1. you can name keyframes a name and provide the time you need, I have provided4sec in the example.
  2. It says change the background color from red to yellow and increase the height by 200px 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>
Manjuboyz
  • 6,978
  • 3
  • 21
  • 43