css3动画库(前端动画特效代码)

  CSS 动画主要通过Transition(过渡)和Animation(关键帧动画)实现,是一种非常实用和流行的网页设计技术,可以帮助用户实现丰富多彩的动画效果,提升用户体验和页面互动性。CSS 动画具有简单、轻量、易用等特点,可以在不依赖 JavaScript 或 Flash 等技术的情况下实现丰富多彩的动画效果。

image.png

  过渡属性

  过渡就是元素从一种样式逐渐改变为另一种的效果,一定要添加过渡持续时间才有过渡效果 transition: 要过渡的属性 【持续的时间】 延迟时间 速度类型;

  transition-property: all,width,height;过渡的属性

  取值:

  all 过渡的所有属性

  property 要过渡的属性

  none 没有过渡的属性

  transition-duration: 2s,1s;过渡持续的时间,必需项,不写或为0都是没有过渡

  transition-delay:2s,1000ms; 过渡的延迟时间,等待几秒开始过渡

  transition-timing-function: ease;过渡的速度类型

  取值:

  ease:默认值(慢-快-慢)

  ease-in 【慢速结束】的运动 (加速)

  ease-out 【慢速结束】的运动 (减速)

  ease-in-out【慢速开始慢速结束】的运动(开始加速最后减速)

  linear 【匀速】的运动

  cubic-bezier(1. 0.16. 0. 1.02),自己定义贝塞尔曲线的速度类型


发表评论

评论列表

还没有评论,快来说点什么吧~