花式使用CSS3 transition_html/css_WEB-ITnose

欢迎交换友链 laker's blog--进击的程序媛

Github： https://github.com/younglaker

微博:江小湖Laker

本文讲介绍 :hover、 :active、 :focus、 :checked、 Media Queries、 JavaScript控制六种方法触发CSS3 transition，以及 transitionend事件的使用。

:hover

最常见的是用hover：

立即学习“前端免费学习笔记（深入）”；

:hover
.hover {  width: 100px;  height: 100px;  background: #222;  color: white;  text-align: center;  transition: all 2s ease;}.hover:hover {  width: 200px;  height: 200px;}

Demo

:active

mousedown s时触发：

:active
.active {  width: 100px;  height: 100px;  background: #222;  color: white;  text-align: center;  transition: all 2s ease;}.active:active {  width: 200px;  height: 200px;}

Demo

:focus

文本框聚焦时（这个在很多网站的搜索框的动画效果里用到）：

  
  
.focus input, .focus textarea {  width: 200px;  transition: width 1s ease;}.focus input:focus, .focus textarea:focus {  width: 300px;}

Demo

:checked

用于checkboxes 和 radio buttons 被选中时：

     Input 1
     Input 2
     Input 3
   Input 4
    input[type="checkbox"]:checked {  height: 20px;  transition: all 1s ease;}input[type="checkbox"]:checked {  width: 30px;}

Demo

Media Queries

改变浏览器窗口大小时触发：

DeepBrain

AI视频生成工具，ChatGPT +生成式视频AI =你可以制作伟大的视频!

下载

media
.media {  width: 200px;  height: 200px;  background: #222;  color: white;  text-align: center;  transition: width 1s ease;}@media only screen and (max-width : 960px) {  .media {    width: 100px;    height: 100px;  }}

Demo

JavaScript事件触发CSS3 transition

通过 JavaScript 或者 jQuery 添加、删除class来完成动画，CSS格式类似 :hover。

例如：

以 click 事件为例，当点击方块时，变化长宽、背景色：

HTML:

CSS:

.box {  width: 200px;  height: 200px;    background: black;  -webkit-transition: all 2s ease;  -moz-transition: all 2s ease;  -o-transition: all 2s ease;  transition: all 2s ease;}.box.clicked {  width: 300px;  height: 300px;    background: blue;}

JavaScript：

$(".box").click(function() {    $(this).toggleClass("clicked");});

Demo

如果用原生JavaScript，可以自己写个添加和删除类的函数。

transitionend 事件

transitionend 事件会在 CSS transition 结束后触发。兼容Chrome、Firefox、Safari、IE10+：

element.addEventListener('transitionend', callback, false);

为保证低版本兼容性可以写webkitTransitionEnd（WebKit ）、otransitionend（Opera）、MSTransitionEnd（IE 10+）、transitionend（Mozilla）。 详见此讨论。

有没有渐变开始的事件？目前只有IE 10+ 有 transionstart 事件，W3C目前未有此标准。