transition

transition-property：动画展示哪些属性，可以使用all关键字
transition–duration：动画过程有多久
transition-timing-function:linear,ease,ease-in,ease-out,ease-in-out，贝塞尔曲线等：控制动画速度变化
transition-delay：动画是否延迟执行

animation

animation-name：keyframes中定义的动画名称
animation-duration：动画执行一次持续的时长
animation-timing-function：动画速率变化函数
animation-delay：动画延迟执行的时间
animation-iteration-count：动画执行的次数，可以是数字，或者关键字（infinate）
animation-direction：alternate(奇数次超前运行，偶数次后退运行)
animation-fill-mode：告诉浏览器将素的格式保持为动画结束时候的样子

这篇文章不讲animation，主要讲transition。

先看看transition的属性：

transition-property：需要参与过渡的属性，例如：width、height、background…
transition-duration：过渡动画的持续时间，单位秒s或毫秒ms
transition-delay：延迟过渡的时间，单位秒s或毫秒ms
transition-timing-function：动画过渡的动画类型

以属性的形式被定义：

div{ width:100px; height:100px; background:blue; transition-property: width;/* 需要参与过渡的属性 */ transition-duration: 1s;/* 过渡动画的持续时间 */ transition-delay: 1s;/* 延迟过渡的时间，单位秒s或毫秒ms */ transition-timing-function: ease-out;/* 动画过渡的动画类型 */ } div:hover{ width:300px; }

csstransition属性和transform_transition属性值有哪些

具体属性再看一遍：

也可以这样写，效果一样。

div{ width:100px; height:100px; background:blue; transition:width 1s 1s ease-out ; } div:hover{ width:300px; }

配合hover(鼠标悬停)，可以让素在变化时产生动画效果，看一段代码：

div{ width:100px; height:500px; background:teal; /* 可以多个属性逐个显示过渡动画效果*/ transition:width .5s linear,height .5s ease .5s,background 1s ease-in 1s; } /* 鼠标悬停，改变div的样式 */ div:hover{ width:500px; height:100px; background:hotpink; }

这些就是应用过渡动画实现的效果，多个属性是依次执行动画效果的，其实就是巧妙应用了过渡延迟属性，让上一个属性执行完了再接着下面一个。

重要属性：transition-timing-function

transition-timing-function是动画运动的曲线，它一共有6个值。

ease – 指定一个缓慢开始，然后快速，然后慢慢结束的过渡效果(这是默认值)
linear – 指定从开始到结束以相同速度的转换效果
ease-in – 指定缓慢启动的过渡效果
ease-out – 指定一个缓慢结束的过渡效果
ease-in-out – 指定开始和结束缓慢的过渡效果
cubic-bezier(n,n,n,n) – 在一个三次贝塞尔函数中定义您自己的值

#div1 {transition-timing-function: linear;} #div2 {transition-timing-function: ease;} #div3 {transition-timing-function: ease-in;} #div4 {transition-timing-function: ease-out;} #div5 {transition-timing-function: ease-in-out;}

再来看一个弹钢琴的效果，代码如下：

<ul> <li><a href="http://www.toutiao.com/a/">首页</a><span></span></li> <li><a href="http://www.toutiao.com/a/">首页</a><span></span></li> <li><a href="http://www.toutiao.com/a/">首页</a><span></span></li> <li><a href="http://www.toutiao.com/a/">首页</a><span></span></li> </ul>

<style> ul { list-style: none; width: 600px; height: 60px; background: skyblue; } li { float: left; /* 参照物 */ position: relative; } a { display: block; width: 150px; height: 60px; line-height: 60px; text-align: center; color: #333; text-decoration: none; /* 提升层级，解决被span遮住 */ position: relative; z-index: 1; } span { position: absolute; bottom: 0; width: 150px; height: 4px; background: pink; /* 过渡 */ transition: height .5s linear; } li:hover span { height: 60px; } </style>

效果图：

总结

想要用过渡动画，一定要结合事件触发，最常用的方式就是鼠标的hover。

csstransition属性和transform_transition属性值有哪些

transition

animation

先看看transition的属性：

重要属性：transition-timing-function

总结

相关推荐