I want to add transition animations to a border I am using SCSS :

display: flex;
&:hover{
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
transition: border 1s ease;
}

This code didn't work , I need a way to add the transitions but I don't know how !

CodePudding user response：

The browser doesn't know how to change from a colour that isn't set, so you simply need a colour to transition from. In this case I've used transparent:

div {
  border: transparent;
  &:hover{
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
    transition: border 1s ease;
  }
}