跟Joy姐学前端 css-day06

过渡 动画 圆角

1.过渡

        transition 指定一个属性发生变化时的切换方式（大部分都支持过渡，需要一个有效值过渡到另一个有效值）

        transition-property 指定属性

         transition-duration 过渡持续时间

        transition-timing-function 过渡方式的时序函数 ease默认值 慢速开始 加速再减速 linear 匀速 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速 steps() 分步执行过渡 接收2个参数 第一个值分几步完成 第二个值是在事件的开始或末尾执行过渡

        transition-delay 延时

过渡简写：transition 没有顺序要求 如果写延时 第一个值是duration 第二个值是delay

2.动画

        animation 自动触发

        animation-name 关键帧名称

        animation-duration 动画持续时间

        animation-iteration-count 动画执行次数 infinite无数次

        animation-delay 动画延时时间

        animation-direction 动画运送方向 （默认值normal 从from到to） reverse 反方向

        animation-timing-function设置动画方式 值同transition-timing-function animation-fill-mode 动画执行完毕后填充方式 forwards 停止在动画结束的位置 backwards 停止在第一帧的位置

简写 animation 没有顺序要求 如果写延时 第一个值是duration 第二个值是delay

3.阴影圆角

box-shadow: 10px 10px 5px 0 rgba(0,0,0,.5); /* 水平偏移量 垂直偏移量 模糊半径 扩展半径 颜色 */
border-radius: 50%;

小结：transition 和animation 用法比较类似，有一点很重要的区别，transition 需要被手动触发，而animation 是自动执行。听了Joy老师的分析，顿觉豁然开朗。