动画描述：鼠标滑入0.2s添加背景颜色，鼠标滑出0.2s变成之前背景颜色

.navigation{transition: all 0.2s ease-in 0s;
}
.navigation:hover{background: #E3E3E3;transition: all 0.2s ease-in;
}

transition

默认值：all 0 ease 0

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;
}
//简写后
div{width:100px;height:100px;background:blue;transition:width 1s 1s ease-out ;
}div:hover{width:300px;
}

css鼠标划出动画(transition属性详解)相关推荐

css动画相关属性详解
css动画相关属性详解文章目录 css动画相关属性详解什么是CSS动画? 一.@keyframes规则二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
css3中transition属性详解
transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显.渐弱.动画快慢等.transition和transform是两种不同的动画模型. ...
CSS3 animation（动画）属性详解
CSS3animation(动画)属性 animation-none :指定有没有动画(可用于覆盖从从级联的动画) animation-duration属性定义动画完成一个周期需要多少秒或毫秒 tim ...
CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
css动画-animation各个属性详解（转）
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括: ...
HTML+CSS教程（十）css3(3D属性详解及动画)
一.3D 转换 1.左手坐标系 :伸出左手,让拇指和食指成"L"形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X.Y.Z 轴的正方 ...
DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand ...
(图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...
css background-attachment属性详解
css background-attachment属性详解 background-attachment属性用途 background-attachment属性用于设置背景图片定位的参照方式 backg ...

css鼠标划出动画(transition属性详解)

transition

css鼠标划出动画(transition属性详解)相关推荐

最新文章

热门文章