transition相关属性

transform的相关属性

变形

transform-origin: 0 0;

• 设置元素变形的原点 不写默认是中心点变化的(50% 50%)

transform: rotate(30deg)

• rotate 旋转 deg度数 正数往右旋转 负数往左旋转

transform: translate(100px);

• 平移移动，设置一个值默认是X轴，赋值是正值是向右移动，负值是向左移动.两个值就是X和Y值

transform:translateY(100px);

• 向Y轴平移，正值是向上，负值是向下

transform:skew(20deg);

• 倾斜。一个值是X轴，两个轴是Y轴

transform:scale(0.5,2)

• 缩放。设置比1大的数是放大，设置比1小的数是缩小
• 设置两个值是都缩放，第一个值是表示宽度，第二个值表示高度

margin移动会影响其他元素，但translate不会对其他元素造成影响

• 先设置平移再设置旋转，如果分开写，后设置的那个状态会把先设置的那个状态覆盖。多个变形方式的正确写法是
• transfrom:translate(300deg) rotate(300deg)
• 设置多个变形方式的时候，位置不一样，最后圆度变形的结果也不一样，因为元素变形之后，轴也相对的发生变化

translate

平移 transform的一个属性

transition相关属性

过渡

transition-property: all

• 单独设置过渡的样式 all表示所有的样式都过渡. 也可以单独设置一个变化的样式，width；宽变化

transition: all 3s

• 设置过渡的时间

transition-timing-function:ease

• 设置动画的执行速率
  • ease 默认值。低速开始，然后加快，在结束之前变慢
  • liner 匀速
  • ease-in 低俗开始，一直加速
  • ease-in-out 先快后慢
    详细的可在浏览器的开发者模式看到

transition-delay:1s

• 延迟变化

我们通常开发中都会选择简化的写法
transition:width .5s liner 2s

过渡

ontransitionstart 过渡开始
ontransitionend 过渡结束