Animated on Media Query

I see a post animated on media query today. It’s very interest to put CSS transition on media query changed. It’s a simple skill and i just try it on my blog. You could resize my blog to check it.
For example: add width transition to my avatar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.myheader-avatar > img{
  height: 60px;
  width: 60px;
  float: left;
  border-radius: 30px;
  @include high_z_index;

  /* New line. */
  transition: width 1.5s;
}

@media screen and (max-width: 700px) {
  .myheader-avatar > img {
    /* When devie max-width under 700px, change width to 0 */
    height: 0;
    width: 0;

    /* transition can't put on display. So i change it to set width=0 */
    /* display: none; */
  }
}

Originally i use display:none to hide avatar but it doesn’t work with transition. I use width=0 insteadly.

css
Comments

Comments