`

css3动画--过渡属性 transition-property

    博客分类:
  • CSS3
 
阅读更多
可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻。简单点说,就是通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。

  transition-property:指定过渡或动态模拟的CSS属性
  transition-duration:指定完成过渡所需的时间
  transition-timing-function:指定过渡函数
  transition-delay:指定开始出现的延迟时间

transition-property对应具有过渡的CSS属性主要有:
  

transition-timing-function包括以下几种函数:
  ease        默认值,速度由快到慢,逐渐变慢
  linear      恒速
  ease-in     渐加效果,加速速度越来越快
  ease-out    渐隐效果,减速速度越来越慢
  ease-in-out 先加速再减速

参加http://www.w3cplus.com/mobile/mobile-terminal-refactoring-slider-animation.html有很详细的讲解。

把几个transition的声明串在一起,用逗号(“,”)隔开,可以有各自不同的延续时间和其时间的速率变换方式。第一个时间的值为 transition-duration,第二个为transition-delay:transition: background-color,height,border-radius .6s ease-in .1s;
示例:
<div class="wrapper">
  <div>鼠标放到我的身上来</div>
</div>

/*容器高度从200px渐显效果过渡到100px并且成圆角,过渡0.1s后触发,整个过渡时间持续0.6s。*/
<style type="text/css">
.wrapper {
  width: 400px;
  height: 200px;
  margin: 20px auto;
  border: 2px dotted red;
  position:relative;
}
.wrapper div {
  padding: 15px 20px;
  color: #fff;
  background-color: orange;
  position: absolute;
  top: 50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-transition:background-color,height,-webkit-border-radius .6s ease-in .1s;
  transition: background-color,height,border-radius .6s ease-in .1s;
}
.wrapper div:hover {
  background-color: red;
  height:100px;
  border-radius: 10px;
}</style>


查看效果:http://jsfiddle.net/5oheh90w/
transition动画与animation动画的区别在于:

1、transition动画只能定义开始和结束位置,中间无法定义;而keyframes则可以定义n帧作为中间的过渡帧。

2、对于切入切出动画来说,transition动画我们只需添加删除一个class即可完成,而animation动画则需要切换两个class,再在最后删除class,比较复杂。

3、如果你的动画不需要定制中间帧,那直接使用transition动画即可,切换一个class就可以了,运动结束时候可以js调用transitionend函数,而如果需要定制中间帧,那么还是animation,当然animation的事件有三个animationstart,animationiteration,animationend
  • 大小: 17.4 KB
分享到:
评论

相关推荐

    纯css3 transition动画过渡属性制作鼠标悬停图片标题

    CSS3的`transition`属性是实现平滑过渡的关键工具,它允许元素在两种状态之间平滑地变化,而不是立即跳转。这种效果在网页设计中非常常见,能够提升用户体验,使网站看起来更现代、更具吸引力。 首先,我们需要理解...

    详解css3 Transition属性(平滑过渡菜单栏案例)

    CSS3的制作动画的三大属性(Transform,Transition,Animation)下面介绍一下 Transition属性。transition属性是一个速记属性有四个属性:transition-property, transition-duration, transition-timing-function, and...

    css动画 css-animation-101.pdf

    过渡的基本属性包括`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`,它们分别定义了哪些属性会过渡,过渡持续多久,过渡的速度曲线,以及延迟多长时间开始过渡。...

    CSS3 transition鼠标hover按钮动画特效

    鼠标hover按钮动画是通过在鼠标悬停时改变元素的样式,然后利用CSS3的transition属性平滑地过渡到新样式。在本示例中,可能有15种不同的动画效果,包括颜色变化、大小变换、旋转、透明度调整等。 3. **使用:hover...

    CSS3基础知识教程transition属性过渡动画效果等

    **CSS3基础知识教程:Transition属性与过渡动画效果详解** 在网页设计中,CSS3的引入为开发者提供了更多增强用户体验的工具。Transition(过渡)属性是其中的一个重要特性,它允许元素从一种样式平滑地过渡到另一种...

    纯CSS3 transition属性鼠标经过酷炫按钮动画特效

    在本文中,我们将深入探讨如何使用CSS3的`transition`属性来创建鼠标经过时的酷炫按钮动画特效。`transition`是CSS3中一个强大的工具,它允许元素在不同状态间平滑过渡,为用户界面增添动态效果,提高用户体验。 ...

    jQuery css3打开遮罩图片形状过渡动画效果

    这通常通过设置`transition`属性来实现,包括`transition-property`(要过渡的属性)、`transition-duration`(过渡持续时间)、`transition-timing-function`(过渡速度曲线)和`transition-delay`(延迟开始时间)...

    HTML5&CSS3网页制作:transition属性.pptx

    HTML5的transition属性是CSS3中的一个核心特性,它允许元素在不同的状态之间平滑地过渡,而不是立即改变。这个属性极大地增强了网页的交互性和视觉吸引力。本文将深入讲解transition属性的定义、用法以及一些关键...

    CSS3热身实战-过渡与动画.docx

    1. **指定要添加效果的CSS属性**:通过`transition-property`属性,你可以定义哪些CSS属性将参与过渡效果。例如,如果你想让元素的宽度和颜色变化有过渡效果,可以写成`transition-property: width, color;`。 2. *...

    CSS3 transition鼠标hover按钮动画特效源码.zip

    【CSS3 transition】是CSS(层叠样式表)的一个重要特性,它允许元素在不同状态之间平滑过渡,比如当鼠标悬停(hover)在按钮上时,可以创建出丰富的动画效果。在网页设计中,按钮是用户交互的重要组件,通过CSS3 ...

    纯css3 transition鼠标悬停图片文字动画显示

    在本文中,我们将深入探讨如何使用CSS3的`transition`属性来实现鼠标悬停时的图片文字动画效果。`transition`是CSS3中一个强大的工具,它允许元素在不同的状态之间平滑过渡,例如在鼠标悬停时改变颜色、大小或透明度...

    CSS3过渡源码

    过渡(Transition)是CSS3的一个属性,用于指定当元素从一种样式变化到另一种样式时,变化应该经过多长时间以及如何进行。过渡效果主要由四个属性组成: - `transition-property`: 定义要应用过渡效果的CSS属性。...

    css3图文列表过渡动画效果.rar_addition1vx_css 列表过渡_css3图文列表过渡动画效果

    1. 过渡属性(transition-property):指定应用过渡效果的CSS属性。例如,你可以设置`transition-property: width, color;`来让宽度和颜色变化时有过渡效果。 2. 过渡时长(transition-duration):定义完成过渡...

    HTML5&CSS3网页制作:transitiontimingfunction属性,transitiondelay属性.pptx

    这两个属性都与CSS3的过渡(transition)功能有关,允许开发者精确控制元素从一种样式变化到另一种样式的速度和时机。 **transition-timing-function**属性定义了过渡效果的速度曲线,它决定了元素在整个过渡过程中...

    纯CSS3属性鼠标悬停动画过渡圈悬停效果

    本文将深入探讨“纯CSS3属性鼠标悬停动画过渡圈悬停效果”的相关知识点。 1. **CSS3选择器**: 在实现悬停效果时,CSS3的选择器至关重要。`:hover`伪类是其中的一个关键元素,它允许我们为元素在鼠标指针悬停时应用...

    CSS3中的Transition属性详解.docx

    CSS3的Transition属性是网页设计中用于创建平滑过渡效果的关键工具。它允许CSS属性值在特定时间内平滑地变化,创造出动态的动画效果。在鼠标点击、获得焦点、元素被点击或者任何属性改变时,Transition都可以触发...

    css3 transition按钮动画特效.zip

    本资源"css3 transition按钮动画特效.zip"专注于利用CSS3的transition属性为网页按钮创建丰富多彩的动画效果。Transition是CSS3中的一个关键特性,它允许元素在不同状态之间平滑过渡,比如在鼠标悬停、点击或其他...

    css3 transition属性鼠标悬停图标按钮动画提示框效果

    在CSS3中,`transition`属性是一个非常重要的特性,它使得元素在不同状态间转换时可以平滑地过渡,而不是瞬间变化。这个属性主要用于创建动态效果,如按钮悬停时的动画,图标变换等,特别是在网页设计中,能极大地...

    css3实现平滑过渡效果

    在CSS3中,平滑过渡效果是通过使用`transition`属性来实现的,它使得元素在改变状态时能够平滑地从一个样式过渡到另一个样式,而不是立即改变。这一特性极大地提升了网页动态效果的用户体验,使得网站看起来更加现代...

    CSS3边框动画

    1. **`transition-property`**: 指定应用过渡效果的CSS属性。例如,`transition-property: border-color;`表示只对边框颜色应用过渡效果。 2. **`transition-duration`**: 定义过渡效果持续的时间。如`transition-...

Global site tag (gtag.js) - Google Analytics