CSS3 transition动画
本文共 1565 字，大约阅读时间需要 5 分钟。
1.transition动画
（1）transition-property 设置过渡的属性，比如：width height background-color
（2）transition-duration 设置过渡的时间，比如：1s 500ms
（3）transition-timing-function 设置过渡的运动方式，常用有linear（匀速）| ease（缓冲运动）
（4）transition-delay 设置动画的延迟
（5）transition：property duration timing-function delay; 同时设置
<head>
<meta charset="utf-8"><title>transition动画</title><style type="text/css">
.box{ width: 100px; height: 100px; background-color: yellow; transition: all 500ms ease,background-color 2s ease;}.box:hover{ width: 500px; height: 500px; background-color: red;} </head>
<body>
</body>
例子二：图片说明文字
<head>
<meta charset="utf-8"><title>图片</title><style type="text/css">
.box{ width: 320px; height: 405px; margin: 50px auto 0; position: relative; overflow: hidden;}.text{ width: 320px; height: 100px; position: absolute; top: 405px; background-color: rgba(124,119,119,0.30); transition: all 500ms ease;}.box:hover .text{ position: absolute; top: 305px;} </head>
<body>
<div class="box"><img src="images/3_02.png" alt="星空"><div class="text">
夜空中最亮的星
我在思考人生
</body>
例子三：夏目
<head>
<meta charset="utf-8"><title>joke</title><style type="text/css">
@keyframes joke{ from{ left: 0px; } to{ left: -2136px; /*图片宽度*/ }}.box{ width: 534px; height: 300px; margin: 50px auto; overflow: hidden; position: relative;}.box img{ position: absolute; animation: joke 1s steps(4) infinite;} </head>
<body>
</body>
转载于:https://blog.51cto.com/13742773/2337008
你可能感兴趣的文章
****** 二十五 ******、软设笔记【数据库】-数据库语言-数据定义、数据查询
查看>>
day7面向对象--反射
查看>>
文件打开方式
查看>>
ERROR 2002
查看>>
NET多线程探索-NET线程基础知识点
查看>>
Oracle 11g R2 新特性
查看>>
微信小程序新手知识
查看>>
java中数据流的简单介绍
查看>>
根据物流号查看物流信息
查看>>
jsp设置MIME类型
查看>>
python模拟自动登录网站（urllib2）
查看>>
Java 对文件的操作
查看>>
洛谷 题解 P3627 【[APIO2009]抢掠计划】
查看>>
springboot传入json和文件_SpringBoot系列教程22-整合SpringMVC之HttpMessageConverters
查看>>
不礼让行人怎么抓拍的_张家川公安交警持续曝光机动车不礼让行人【第24期】...
查看>>
用pythonturtle写名字_去年爆款新生儿名字，家长自以为起的不错，却有“棺材”的意思...
查看>>
句子分类_语法微课句子的分类+文本讲解
查看>>
显示提示_体检报告显示：“转氨酶”升高！提示身体可能出现了这些健康问题...
查看>>
图形化分析工具_推荐一款基于小米 soar 的开源 sql 分析与优化的 web 图形化工具...
查看>>
485 工控机 接线方式_RS485温湿度传感器的接线方式及注意事项
查看>>