前端 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;
}


目录
相关文章
|
6天前
|
前端开发 JavaScript
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
114 73
|
1月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
9天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
27 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
29天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
1月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
50 22
|
1月前
|
前端开发 开发者 UED
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
54 1
|
3月前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
72 31
|
2月前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
66 6
|
3月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
92 7
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
69 6

热门文章

最新文章

  • 1
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    3
  • 2
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    32
  • 3
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    61
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    27
  • 5
    巧用通义灵码,提升前端研发效率
    93
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    144
  • 7
    详解智能编码在前端研发的创新应用
    100
  • 8
    智能编码在前端研发的创新应用
    83
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    38
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    124