CSS高级篇——过渡动画

CSS Transitions 让我们不写一行 JavaScript 代码也能实现过渡动画。

举一个最简单的例子：

a:link {color: hsl(36,50%,50%);
}
a:hover {color: hsl(36,100%,50%);
}

当鼠标悬浮于某个链接时，它的颜色会从 hsl(36,50%,50%) 瞬间变化为 hsl(36,100%,50%)。这个变化因为没有过渡，会显得特别生硬。

有了 transition 属性，我们便可以实现一个非常平滑的过渡效果，它也是一个简写属性，取值由以下部分构成：

transition-property - 目标属性
transition-duration - 过渡时长
transition-timing-function - 缓动函数：匀速、加速以及减速。
transtion-delay - 动画触发的等待时长

我们把上面的 CSS 稍作修改：

a:link {transition: all .5s linear 0;color: hsl(36,50%,50%);
}
a:hover {color: hsl(36,100%,50%);
}

动画效果就有了，当鼠标悬浮在链接上时，颜色会发生渐变，非常平滑。

这里的 transition 表示所有的属性在半秒内完成线性过渡，没有延迟。

注意，这么多渐变属性中，只有 transition-duration 是必需的，其它都有默认值：

transition-property: all;

transition-timing-function: ease;

transition-delay: 0;

所以最简单的渐变可以写成 transition: .5s.。

特定属性

虽然 “all” 可以让渐变作用于所有属性，但我们仍然可以指定某个属性，例如 transition: color .5s ease 0 将只作用于颜色属性。

也可以同时指定多个属性，中间用逗号隔开：

a:link {transition: .5s;transition-property: color, font-size;
}

还可以同时指定多条渐变规则：

a:link {transition: color .5s, font-size 2s;
}

缓动

transition-timing-function 类似于数学表达式 velocity = func(time)，它会根据时间来改变动画速度，一般称作「差值函数」。

它的变化是一个三次贝塞尔曲线，取值有 ease 和 linear 两类。

ease 表示先加速后减速。可拆分成 ease-in 和 ease-out。
linear 表示匀速。

cubic-bezier.com 很好了演示了这两种动画。

CSS高级篇——过渡动画相关推荐

【动画消消乐】纯CSS加载/过渡动画学习笔记合集（1-50）
Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍一下 ଘ(੭ˊᵕˋ)੭ 昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入 ...
CSS高级篇——圆角
圆角会让生硬的背景图变得更圆润,可以起到很好的修饰作用. 边框半径 border-radius 属性可以让盒子(box)的四个角变成圆角,这个属性名有误导性,其实没有边框依然可以变圆角. #maril ...
CSS高级篇——渐变 (gradient)
配合 background 和 background-image 可以实现线性(linear)和辐射(radial)渐变. 线性渐变 linear-gradient 可以实现线性渐变. backgro ...
CSS高级篇——属性选择器 (attribute selectors)
属性选择器可以定位到拥有某个属性的元素,甚至可以精确到具体的属性值. 属性匹配选择器后面跟一个方括号,方括号内是属性名: abbr[title] { border-bottom: 1px dotte ...
Vue中的基础过渡动画原理解析
前言在日常开发中动画是必不可少的一部分不仅能让元素直接的切换显得更加自然同时也能极大的增强用户体验因此在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡 ...
[iOS]过渡动画之高级模仿 airbnb
注意:我为过渡动画写了两篇文章: 第一篇:[iOS]过渡动画之简单模仿系统,主要分析系统简单的动画实现原理,以及讲解坐标系.绝对坐标系.相对坐标系,坐标系转换等知识,为第二篇储备理论基础.最后实现 M ...
ElementUI过渡动画篇
ElementUI过渡动画篇 element官方提供的过渡动画并不能很好的满足使用.我尝试过几种过渡动画的设置方式,最终选择了Animate.css. 一.使用方法? 引入引入: npm insta ...
css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画一.总结一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...
css 入场动画_React系列十四 React过渡动画
在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验. 当然,我们可以通过原生的CSS来实现这些过渡动画,但是React社区为我们提供了react-transition-g ...

CSS高级篇——过渡动画

特定属性

缓动

CSS高级篇——过渡动画相关推荐

最新文章

热门文章