龙华网站建设首页地址,网页设计布局分析,腾讯云海外服务器,旅游攻略网站开发背景1. transition过度动画
1.1 介绍 CSS trnasition提供了一种在更改CSS属性时控制动画速度的方法。 可以让CSS的属性变化称为一个秩序一段时间的过程#xff0c;而不是默认的立即生效 比如在基础9中我们学到的trnaslate可以让一个元素移动#xff0c;但瞬间就完成了 我们可…1. transition过度动画
1.1 介绍 CSS trnasition提供了一种在更改CSS属性时控制动画速度的方法。 可以让CSS的属性变化称为一个秩序一段时间的过程而不是默认的立即生效 比如在基础9中我们学到的trnaslate可以让一个元素移动但瞬间就完成了 我们可以利用trnasition让这个完成的过程有一定的动画效果 属性可以控制的内容 哪些属性需要进度过度动画何时开始可以延时触发比如2s后再进行动画持续多久duration动画的持续时间定义动画匀速、先快后慢、先慢后快timing
1.2 哪些CSS属性可以做动画 可以通过MDN查询 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties 月度CSS属性的文档说明
1.3 过渡动画 transition 的属性值
transition-propety:指定过度属性的名称比如width、left all:所有属性都执行动画none所有属性都不执行动画 transition-duration:动画的持续时间 单位可以说秒s或者是毫秒ms trnasition-timing-function:指定动画的变化曲线 通过这里查询 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function transition-delay:指定延时时间 秒s transition:是整个动画的简写 顺序过度属性 持续时间 变化曲线 延时时间transition-propety transition-duration transition-timming-function transition-delay
.box:hover {transform: skew(10deg);transition-property: transform;transition-duration: 2s;transition-timing-function: ease-in;transition-delay: 1s;
}2. animation 动画
前面我们学习了trnasition来进行过度动画但过渡动画有如下缺点
transition只能定义开始和结束状态不能定义中间的过程transition不能重复执行transition需要在特定的状态下执行比如某个元素修改了
那么animation就是更为复杂的动画可以解决以上问题
2.1 animation介绍
animation的定义 使用keyframes定义动画过程配置动画的名称 持续时间 动画曲线 延时时间 执行次数 方向
2.2 keyframes规则
使用keyframes来定义整个动画的状态变化 定义动画发生的事件点比如0% 20% 100%等0%表示动画发生的第一时刻100%表示动画的最终时刻开始和结束还有两个特殊的别名from和to
比如我们要将一个盒子先向下平移再向右最后向上
keyframes translateAnimation {0% {transform: translate(0, 0);}33% {transform: translate(0, 100px);}66% {transform: translate(200px, 100px);}100% {transform: translate(200px, 0px);}
}2.3 animation的属性
animation-name:指定定义的动画也就是keyframes定义的动画名称animation-duration:动画的持续时间animation-timming-function:动画曲线animation-delay:动画延时时间animation-iteration-count:动画执行的次数infinite表示无限循环animation-direction指定方向 normal表示正序reverse返序 animation-fill-mode:执行动画保留哪个值 none: 回到没有执行动画的位置forwards:动画最后一帧的位置backwards:动画第一帧的位置 animation-play-state:指定动画的暂停和运行用JS控制
2.4 animation的属性简写
顺序 动画名称 动画持续时间 动画曲线 动画延时时间 动画执行次数 动画方向 动画最后停留的帧 动画执行状态 animation-name animation-duration animation-timming-function animation-delay animation-iterration-count animation-direction animation-fill-mode animation-play-state
举例
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box {width: 100px;height: 100px;background-color: pink;animation: translateAnimation 2s ease 1s 2 normal forwards;}keyframes translateAnimation {0% {transform: translate(0, 0);}33% {transform: translate(0, 100px);}66% {transform: translate(200px, 100px);}100% {transform: translate(200px, 0px);}}/style/headbodydiv classbox/div/body
/html
