css transition过渡

css过渡效果

transition设置过渡，transition的属性包括如下图：

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

设置格式

为了不同浏览器的效果，需要为其它几种添加相应的前缀标识：

transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */

-webkit-transition: width 2s; /* Safari 和 Chrome */

-o-transition: width 2s; /* Opera */

如下：

width属性会改变，用时1秒，速度样式匀速，延时1秒。

transition-property:width;

transition-duration:1s;

transition-timing-function:linear; //过渡效果

transition-delay：1s; //过渡延时

简写格式：transition:width 1s linear 1s;

也可以多属性样式改变，如下：

width,height,transform属性会改变，对应的样式用时1秒中，过渡效果为linear(匀速)，延时1秒

transition-property:width, height,transform;

transition-duration:1s,1s,1s,;

transition-timing-function:linear; //过渡效果

transition-delay：1s; //过渡延时

简写格式：transition:width 1s,height 1s,transform 1s;

以上之后，确定属性改变的时候，可以是在鼠标放在元素上之后：

元素：hover{

width: 150px;

height: 150px;

transform:rotate(360deg);

}需要为其它几种添加相应的前缀标识：

这样就ok 了。！

<!DOCTYPE html>

<html>

<title>css的过渡</title>

<style>

#test{

width: 1000px;

margin: auto;

text-align: center;

}

.demo{

width: 100px;

height: 100px;

margin-top: 100px;

text-align: center;

line-height: 100px;

display: inline-block;

background: red;

transition-property: width,height,transform;

transition-duration: 1s;

transition-timing-function: linear;

/* Firefox 4 */

-moz-transition-property:width,height,transform;

-moz-transition-duration:1s;

-moz-transition-timing-function:linear;

/* Safari 和 Chrome */

-webkit-transition-property:width,height,transform;

-webkit-transition-duration:1s;

-webkit-transition-timing-function:linear,transform;

/* Opera */

-o-transition-property:width,height,transform;

-o-transition-duration:1s;

-o-transition-timing-function:linear;

}

.demo:hover{

width: 150px;

height: 150px;

line-height: 150px;

background-color: red;

transform:rotate(360deg);

-moz-transform:rotate(360deg);

-webkit-transform:rotate(360deg);

-o-transform:rotate(360deg);

}

</style>

</head>

<body>

<div class="demo" style="background-color: yellowgreen">hello word!</div>

<div class="demo" style="background-color: greenyellow">PHP语法</div>

<div class="demo" style="background-color: dodgerblue">object</div>

</div>

</body>

</html>

转载于:https://blog.51cto.com/mengle/1704481

css transition过渡相关推荐

css 实现动画的三种方式: transition 过渡、 transform 变形、 animation 关键帧动画
1.transition 过渡动画: 1. 语法:1. transition: 属性是个复合属性 .2. transition: property duration timing-function d ...
vue2基础 - transition 过渡动画结合 animate.css和 Velocity.js 的使用
文章目录 CSS 动画库 Animate.css JavaScript 钩子结合 Velocity.js 库示例 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工 ...
CSS transition delay简介与进阶应用
背景在日常的项目开发中,我们会很经常的遇见如下的需求: 在浏览器页面中,当鼠标移动到某个部分后,另一个部分在延迟若干时间后出现在鼠标移除该区域后,另一部分也在延迟若干时间后消失我相信这是一个很常 ...
利用css transition属性实现一个带动画显隐的微信小程序部件
我们先来看效果图像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会 ...
No.3 - CSS transition 和 CSS transform 配合制作动画
课程概述作业提交截止时间:09-01 任务目的深度理解掌握 transition-timing-function 以及它的意义学会配合使用 CSS transform 和CSS transiti ...
css3中transition过渡和animation动画的区别
css3中transition过渡和animation动画的区别 animation 多两个参数,循环和动画的方式 transition不能自行触发,通过hover等动作或结合JS进行触发.anmia ...
html+css+动画过渡做遮罩层
html+css+动画过渡做的遮罩层这个最重要的是css样式,首先先看看html架构吧: 两个div不用多讲,上就对了: <div id="mask_layer">天 ...
transition(过渡)
transition(过渡) transition是CSS3中具有特殊功能的特性之一,可以不使用flash动画或者JS计时器的情况下,当元素从一种样式变为另一种样式时为元素添加过渡效果. 浏览器支持情 ...
transition过渡
transition过渡定义和用法 transition用于设置四个过渡属性: 1.transition-property : 规定设置过渡效果的CSS属性的名称. all ( 默认值 ) , 指定 ...

css transition过渡

css transition过渡相关推荐

最新文章

热门文章