transition和transition的区别

1. 两者的区别，触发条件不一样，transition一般通过hover和事件等触发，而animation 是立即触发

2. animation可以设定循环次数

3. animation可以很灵活的控制动画

过度transition可以实现简单的动画交互效果

定义**
过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果

transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)

1、下面面transition:width 2s定义在类名属性中，触发鼠标悬浮时，会触发元素的过渡动画效果，鼠标离开时，也会触发元素的过渡效果

.box{width:100px;height:100px;background:blue;transition:width 2s;
}
.box:hover{width:300px;
}
<div class='box'></div>

2.如果transition: width 2s 属性写在hover样式中，鼠标悬浮的过渡动画还是会有，但是鼠标离开时的动画没有了，鼠标离开没有过渡效果，直接回到初始状态

.box{width:100px;height:100px;background:blue;
}
.box:hover{width:300px;transition:width 2s;
}
<div class='box'></div>

transition和transition的区别相关推荐

css 缩放_CSS 中 transform、animation、transition、translate的区别
在前端页面的开发过程中,经常会碰到这么几个 CSS 属性容易搞混:transform.translate.animation还有transition.下面就针对这几个 CSS 属性做一个对比,辨别这几 ...
css中关于transform、transition、animate的区别
写动画经常会用到这几个属性,他们之间有什么区别呢? 1.transform 每每演示transform属性的,看起来好像都是带动画.这使得小部分直觉化思维的人(包括我)认为transform属性是动画 ...
transition transform translate 之间的区别
文章目录 01.transform(转换) 和 translate 02.transition(过渡) 01.transform(转换) 和 translate transform的中文翻译是变换.变 ...
CSS3 Transform、Transition和Animation属性总结
CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...
css动画走马灯5秒,css3 transition 和 animation实现走马灯
这段时间在做一个App,H5的开发.页面上有公告以走马灯的形式显示出来. 在开始直接用的marquee标签,后来发现在ios客户端,走马灯移动不够平滑,有抖动现象. 对于有强迫症的我而言是无法忍受的 ...
详解React的Transition工作原理原理
Transition 使用姿势 Transition 是 react18 引入的新概念,用来区分紧急和非紧急的更新. 紧急的更新,指的是一些直接的用户交互,如输入.点击等: 非紧急的更新,指的是 UI ...
vue transition动画
引用: https://www.cnblogs.com/ccyinghua/p/7872694.html https://blog.csdn.net/wxw20147854/article/detai ...
CSS transition delay简介与进阶应用
背景在日常的项目开发中,我们会很经常的遇见如下的需求: 在浏览器页面中,当鼠标移动到某个部分后,另一个部分在延迟若干时间后出现在鼠标移除该区域后,另一部分也在延迟若干时间后消失我相信这是一个很常 ...
css transition兼容性,CSS3 Transition详解和使用
Transition 简介 Transition 可以设置 CSS 属性的过渡效果,它有以下几个属性. transition-property 用于指定应用过渡属性的名称 transition-dur ...