CSS3.过渡与动画属性的整理总结

2024-07-07 02:40| 来源: 网络整理| 查看: 265

css3过渡 transition 属性

1. transition-property：检索或设置对象中的参与过渡的属性；

默认值：all（能支持过渡属性的都会过渡变换，可单独设置属性）

2. transition-duration：检索或设置对象过渡的持续时间；单位：s秒或ms毫秒

3. transition-delay：检索或设置对象延迟过渡的时间；单位：s秒或ms毫秒

4. transition-timing-function：检索或设置对象中过渡的动画类型；

动画的类型（匀速、匀加速、匀减速...） ease:默认值,慢速开始,中间加速,最后减速. ease-in:慢速开始,逐渐加速; ease-out:以慢速结束,减速效果; ease-in-out:慢速开始，慢速结束; linear:匀速；常用写法

transition: 过渡属性过渡时间延迟时间动画类型；

transition：all 5s 2s linear；

注：transition属性必须通过鼠标事件触发

案例：结合定位实现简单交互动效 .con{ width:550px; height:300px; background:cadetblue; position:relative; overflow:hidden; } .con .box_1{ width: 350px; height: 200px; position: absolute; left:100px; top:50px; background-color: chocolate; transition: all 1s ease; } .con .box_2{ width: 200px; height: 200px; position: absolute; left:100%; top: 50px; background-color: darkmagenta; transition: all 1s ease; } .con:hover .box_1{left: 50px; top: 50px; width: 200px;} .con:hover .box_2{left:300px;}

最终效果

CSS3.动画 animation

与 transition不同的是 animation不需要鼠标事件触发

属性

animation-name 关键帧名称

animation-duration 动画的持续时间

animation-timing-function 动画运用的类型

linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。贝塞尔曲线 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 step-start 立刻跳转到下一帧，没有中间动画（常用来做逐帧动画）

animation-delay 动画的延迟

animation-iteration-count 动画运动的次数

（默认1次，infinite无限循环）

animation-direction 运动的方向

属性值： -reverse：反方向运行（让关键帧从后往前运行） -alternate 动画先正着后反着，持续交替运行 -alternate-reverse 先反运动再正运动，持续交替运行

animation-play-state 控制动画的暂停与播放

属性值： paused暂停 running运动（默认）常用写法

animation：关键帧名称动画运动的时间 linear；

制定关键帧 @keyframes 关键帧的名称 { form{开始状态} to{结束状态} 或 0%{开始状态}.... 100%{结束状态} } 动画制作流程（案例）动画 .con{ width: 500px; height: 300px; background-color: indianred; position: relative; overflow: hidden; } .box{ width: 80px; height: 80px; border-radius: 50%; background-color: lightskyblue; line-height: 80px; text-align: center; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } 制定关键帧 @keyframes boxMove { 0%{transform: translateX(-300px) scale(0.5) rotate(0);} 20%{transform: translateX(0) scale(1) rotate(360deg);} 35%{transform: translateX(0) translateY(-20px) scale(1.2) rotate(360deg);} 50%{transform: translateX(0) translateY(0) scale(1) rotate(360deg);} 60%{transform: translateX(0) translateY(-20px) scale(1.2) rotate(360deg);} 75%{transform: translateX(0) translateY(0) scale(1) rotate(360deg);} 100%{transform: translateX(300px) translateY(0) scale(0.5) rotate(720deg);} } 调用关键帧 .box{animation: boxMove 5s linear infinite;}

最终效果在这里插入图片描述

总结

1.transition需要鼠标事件（悬浮、焦点、点击）触发，不能自动执行 2.transition只能设置开始和结束两个状态，不能设置中间的状态 3.transition触发一次执行一次，多次执行，需要多次触发 4.animation不需要条件触发，页面加载完成即开始执行 5.animation制定关键帧有两种方式

form（）…to（）类似transition，从初始状态到结束状态 0%｛｝……100%｛｝类似flash动画，可以设置多个关键帧，动画更细腻

【本文地址】

公司简介

联系我们