CSS-基础(七)

CSS学习笔记（七）

CSS过渡 transition

过渡属性

transition-property:[...property]

过渡时间

transition-duration:[...time]

延迟触发

transition-delay:[...time]

过渡效果

transition-timing-function:[linear||ease-in||ease-out||ease-in-out]

过渡属性的缩写，其中transition-duration必填

transition:[property1] [transition-timing-function] transition-duration [transition-delay],

动画 Animation

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}
/*
  is the same as:
*/
.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}
/*创建新的动画帧*/
@keyframes ruoyu{
  from{
    transform:scale(2);
  }
  to{
    transfrom:translateX(200px);
  }
}
/*使用百分比实现帧动画*/
@keyframe ruoyu{
  0%{
    transform:scale(2);
  }
  50%{
    background-color: #FF4136;
  }
  100%{
    transfrom:translateX(200px);
  }
}

属性重叠时，后者优先级高于前者

.element{
  /*hello定义的相同动画属性会覆盖ruoyu*/ 
  animation-name:ruoyu,hello;
}
@keyframe ruoyu{to{transfrom:translateX(20px)}...}
@keyframe hello{to{transfrom:translateX(100px)}...}

• The number of times the animation is played. The value must be one of those available in animation-iteration-count.

• The direction in which the animation is played. The value must be one of those available in animation-direction.

• Determines how styles should be applied to the animation’s target before and after its execution. The value must be one of those available in animation-fill-mode.

• Determines whether the animation is playing or not. The value must be one of those available in animation-play-state.

媒体选择器

@media screen and max-width(768px){...}

• 逻辑或

  应用于横屏或者尺寸大于768px

@media screen and (orientation:landscape), and (min-width(768px)

• 逻辑非

  应用于不是横屏或者尺寸小于768px

  @media not screen and (orientation:landscape), and (min-width(768px)

• 逻辑only

  用来忽略不兼容的低端浏览器

  @media only screen and (min-width:600px)