前端 css 经典:transition 过渡和 animation 动画

简介: 前端 css 经典:transition 过渡和 animation 动画

1. transition 过渡动画

给 dom 元素添加变形、变形的过程添加动画

/* 元素变形种类 2D */
/* 移动:translate(100px, 100px) 水平和垂直方向各移动100px。*/
/* 旋转:rotate(60deg) 顺时针旋转60度 */
/* 缩放:scale(0.5) 缩小一半, 1表示不表,大于1是放大 */
/* 倾斜:skew(30deg, 30deg) 水平和垂直方向和顺时针倾斜30度。*/
.active {
  transform: translate(100px, 100px) rotate(60deg) scale(0.5) skew(30deg, 30deg);
  /* transition: 过渡的属性 完成时间(s) 运动曲线 延迟时间 */
  /* 运动曲线: ease:减速、linear:匀速、ease-in:加速、ease-out:减速、*/
  /*          ease-in-out:先加后减、cubic-bezier(n,n,n,n):三次贝塞尔定义 */
  transition: all 3s linear 0s;
}
 
/* 元素变形种类 3D */
/* 3D 变形首先要给变形DOM一个父级DOM,并且父级DOM设置 perspective, 添加透视效果*/
/* 旋转:rotateX(), rotateY(),rotateZ() 围绕X,Y,Z轴旋转 */
/* 移动:translateX(),translateY(),translateZ() 延X,Y,Z轴平移*/
.father {
  perspective: 500px;
}

2. animation 动画

/* 定义动画 */
@keyframes demo {
  0% {
    transform: translate(0px);
  }
  100% {
    transform: translate(200px);
  }
}
/* or */
@keyframes demo {
  from {
    transform: translate(0px);
  }
  to {
    transform: translate(200px);
  }
}
 
/* 使用动画 */
div {
  /* 简写 */
  /* animation:动画名称 动画时长(有这两个即可以完成动画,其它未设置,有默认值) */
  animation: demo 2s;
  /* animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画 */
  animation: demo 2s linear 0 infinite;
 
  /* 详写 */
  /* 动画名称 */
  animation-name: demo;
  /* 持续时间 */
  animation-duration: 1s;
  /* 运动曲线 和 transition 的运动曲线一样 */
  animation-timing-function: linear;
  /* 何时开始 */
  animation-delay: 0;
  /* 重复次数 iteration 重复的   count 次数  infinite无限 */
  animation-iteration-count: infinite;
  /* 是否反方向播放  默认normal  想反方向就写alternate*/
  animation-direction: alternate;
  /* 动画结束后状态默认backwards  回到起始状态 我们可以让他停留在结束状态forwards */
  animation-fill-mode: forwards;
}


目录
相关文章
|
2天前
|
前端开发 JavaScript 开发者
CSS进阶-过渡与动画的事件监听
【6月更文挑战第16天】**CSS过渡和动画事件增强交互性,但监听与控制需谨慎。了解`transitionend`用于CSS过渡结束时的响应,避免过度使用JavaScript检测变化。示例代码展示如何绑定`transitionend`事件并在结束后执行操作。对于CSS动画,理解`animationstart`, `animationiteration`, `animationend`事件的生命周期至关重要,确保在动画结束后进行适当的清理。通过这些技巧,优化用户体验并提高代码效率。**
|
2天前
|
前端开发 开发者 异构计算
CSS进阶-CSS动画关键帧
【6月更文挑战第15天】CSS的`@keyframes`创建细腻动画,定义样式变化阶段以增强网页互动性。通过`animation`属性应用动画,如`fadeIn`示例。常见问题包括动画结束状态、卡顿和浏览器兼容性,解决办法涉及优化关键帧、使用硬件加速和添加前缀。进阶技巧包括多步骤动画和控制播放状态。例如,背景色渐变动画展示了颜色随时间变化的效果。学习和实践关键帧动画,提升Web开发技能。
|
3天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
4天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
17 2
|
7天前
|
前端开发 JavaScript 开发者
CSS基础-CSS3过渡与动画
【6月更文挑战第11天】本文介绍了CSS3的过渡和动画特性,用于创建平滑的视觉效果。过渡通过`transition`属性实现元素样式改变的缓动效果,常用于按钮悬停、图片切换等场景。易错点包括忘记设置初始和最终样式,以及过渡效果不明显。动画则利用`@keyframes`定义关键帧序列,适用于循环播放的图标旋转等复杂效果。动画的错误可能在于结束状态处理和无限循环的性能问题。通过代码示例和避免常见陷阱,开发者能更好地利用CSS3动画提升网页交互体验。关键在于适度使用,保持界面流畅舒适。
|
12天前
|
存储 前端开发 Windows
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
14天前
|
前端开发 UED 容器
纯CSS画浮动卡通蓝天白云草坪动画效果
【6月更文挑战第1天】网页设计中,通过创新技巧,可以使用HTML和CSS模拟云朵漂浮和草地动画效果,提升用户体验。背景实现采用线性渐变动画,使背景颜色从浅青至白平滑过渡并循环移动。云朵效果通过多个不同大小和位置的`<div>`元素,结合CSS的`position: absolute;`和`@keyframes`动画实现浮动。草的动画则是通过三角形形状及`::before`和`::after`伪元素创造,配合不同动画速度和角度模拟自然摆动。完整代码可在提供的链接中下载。
22 1
纯CSS画浮动卡通蓝天白云草坪动画效果
|
18天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
25 1
|
24天前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
16 0
|
9月前
CSS3 animation 全屏图片切换动画
CSS3 animation 全屏图片切换动画
36 0