一、transition 过渡属性
transition:css 属性名称 总时间 运动曲线 何时开始;
这种效果可以在鼠标点击,点击,获取焦点 或则对元素任
何改变中触发 并以动画效果改变CSS属性值。
动画执行的贝塞尔函数:
https://img-blog.csdn.net/20161214114558941?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2RkY2o=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
二、animation
@keyframes规则,用于创建动画,@keyframes规定css样式,创建由当前样式逐渐改为新样式的动画
注意事项:创建时需要绑定选择器,否则无效 当绑定选择器时会自动将动画添加给元素
三、区别
transition:强调过度;
需要触发一个事件,比如鼠标移上去,焦点,点击。
animation:多个关键帧 ,实现自由动画,动画需要创建动画规则;
不需要触发任何事件也可随时间变化达到一种动画效果;
与transition不同是animation可以通过@keyframe控制当前帧属性,更灵活。