[OK,复制并粘贴] 8个CSS动画示例,可以稍加使用(带注释)

在本文中,我将在解释CSS动画时发布一个示例。

  • 我可以编写CSS,但对动画不熟悉。
  • 我对CSS动画感兴趣。
  • 但是我不知道如何实现...

主要面向编码人员和初学者前端工程师。
这是一些可以用CSS复制的常用动画样本。

还建议这样做:[复制和粘贴修改成功]仅可使用CSS进行的10个按钮设计

的CSS动画

与CSS动画相关的属性包括过渡和动画。

过渡属性

采取一些措施后随时间变化你可以写。
例如,将光标放在其上时,可以将文本颜色从白色更改为黑色。
过渡属性是速记属性,可让您一起编写多个属性。

过渡财产 …指定过渡效果CSS属性(默认值:全部)
过渡持续时间 …完成过渡动画的时间(默认值:0秒)
过渡计时功能 …过渡的中间状态(默认:缓解)
过渡延迟 …等待过渡开始的时间(默认值:0秒)

编写四个属性,并用半角空格隔开,如下所示。

过渡:所有0.1秒缓解0.1秒;

如果省略说明,将输入默认值。

参考:您可以用它掌握它!如何使用可以是CSS的过渡

动画属性

可以指定动画属性比过渡属性更多的项目。也可以无限循环播放动画。关键帧(@keyframes)使您可以更好地控制动画的中间状态。

动画属性也是速记属性,使您可以一起编写多个属性。

动画名称 …要使用的关键帧的名称(默认值:无)
动画时间 …完成动画的时间(默认值:0秒)
动画定时功能 …动画的中间状态(默认值:easy)
动画延迟 …动画开始的等待时间(默认值:0秒)
动画迭代次数 …动画数量(默认值:1)
动画方向 …动画播放方向(默认:正常)
动画填充模式 …运行动画前后的样式(默认值:无)
动画播放状态 …指定动画是正在运行还是已停止(默认值:正在运行)

每个浏览器的支持状态

对于IE,过渡和动画都与IE10〜兼容。
我可以用吗…从数量上看,股份的数量不是很大,但是似乎有供应商前缀-webkit-(截至2018年9月)
//caniuse.com/#feat=css-transitions
//caniuse.com/#feat=css-animation
在本文中,我将在不编写供应商前缀的情况下对其进行介绍。

关于样本

基本上,我将介绍仅用CSS表示的内容,而不需要JavaScript。您可以复制和自定义它。

示例:[基本]悬停时更改链接颜色

当您将光标放在链接上时,这是一种软更改颜色的方法。

看笔 css-transition-link_basic 通过beco(@becolomochi) 上 密码笔.

的HTML

a在元素中,链接该类已附加。

<a class="link" href="#">リンク</a>

的CSS

首先,在更改之前写。

.link {
  color: #03A9F4;
  过渡:0.2秒;
}

链接首先,将常规颜色(浅蓝色)设置为该类。
另外,编写过渡属性。这里过渡:0.2秒据说。0.2秒200毫秒通过那个过渡持续时间设置好了。
这是,在200毫秒内更改链接的样式代表着 · · ·

由于省略了可以在transition属性中写入的其他属性的值,因此输入了以下默认值。

  • 过渡财产 至 所有
  • 过渡计时功能 至 缓解
  • 过渡延迟 至 0

分别包括在内。

链接类:悬停当光标击中伪类时编写设置。

.link:hover {
color: #3f51b5;
}

我将其设置为深蓝色。

对于显示更改之前的标签,过渡写。

示例:类似按钮的链接动画

它是基于基本链接的类似按钮的样式。

看笔 css-transition-link_advance 通过beco(@becolomochi) 上 密码笔.

的HTML

的HTML端与上一个示例中的基本链接几乎相同。班级名称btn链接变成。

<a href="#" class="btn-link">リンク</a>

的CSS

的CSS描述的数量一下子增加了。让我们一点一点看。所有内容请参考Codepen,因为省略了与动画无关的装饰样式。

.btn-link {
  /* 装飾のスタイル */
  /* ...省略... */
  /* 動作に関わるスタイル */
  职位:相对
  最佳: 0;
  背景颜色: #03A9F4;
  过渡:背景色0.2秒;
}

与操作相关的样式是用于更改以下内容的设置。

  • 指定位置位置属性和最佳属性
  • 更改背景颜色背景颜色属性

最佳我不想为该属性设置动画,所以我将其更改为过渡属性背景颜色这是过渡财产将价值。
0.2秒过渡持续时间的价值。动画超过200毫秒。

接下来是光标点击:悬停这是一个伪类。

.btn-link:hover {
  背景颜色: #3f51b5;
}

设置为深蓝色。

最后,当您单击:活跃这是一个伪类。

.btn-link:active {
  背景颜色: #03A9F4;
  最佳: 1px;
}

背景颜色为浅蓝色,并且位置设置为向下移动1像素。

如果存在不想设置动画的属性,请仅在transition属性中编写要设置动画的属性。
如果未指定,则默认值为all,并且所有属性均为动画。

示例:按钮元素的动画

这是一个示例按钮元素,当悬停/激活时,其背景颜色随动画而变化。

看笔 的CSS转换按钮 通过beco(@becolomochi) 上 密码笔.

的HTML

在按钮元素中btn该类已附加。

<button type="button" class="btn">ボタン</button>

的CSS

我早些时候已经删除了button元素的默认样式。这是因为它使样式设置更容易。

button {
  /* スタイルをリセット */
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  光标:指针;
  padding: 0;
  背景颜色: transparent;
  font-size: 16px;
}

之后,像按钮式链接一样,以.btn(正常时间)→:悬停→:活动的顺序准备样式。

.btn

.btn {
  border-radius: 4px;
  color: #fff;
  背景颜色: #2196f3;
  padding: 4px 16px;
  职位:相对
  最佳: 0;
  过渡:背景色0.2秒;
}

:悬停(当光标点击时)

.btn:hover {
  背景颜色: #64b5f6;
}

:活动(单击后)

.btn:active {
  背景颜色: #2196f3;
  最佳: 1px;
}

示例:单选按钮动画

这是一个选择单选按钮时动画的示例。

看笔 的CSS过渡无线电 通过beco(@becolomochi) 上 密码笔.

的HTML

创建看起来像单选按钮的样式输入元素是标签它在元素之外。

为了使单选按钮起作用,请不要忘记输入元素的id属性和标签元素的for属性。
<input type="radio" class="toggle-radio" id="test1" name="test-form"> <label class="toggle-radio-label" for="test1">ラジオ1</label>
<input type="radio" class="toggle-radio" id="test2" name="test-form"> <label class="toggle-radio-label" for="test2">ラジオ2</label>

的CSS

我将单独解释。
首先,隐藏单选按钮。

.toggle-radio {
  display: none;
}

接下来,设置标签样式。

.toggle-radio-label {
  光标:指针;
  margin-right: 1em;
  职位:相对
  padding-left:18px;
  font-size: 16px;
}

光标:指针;用光标击中时将光标的形状更改为指尖。
职位:相对padding-left:18px;创建一个边距以显示单选按钮样式。

标签的::之前带有伪元素::之后创建带有伪元素的单选按钮样式。
::之前和::之后可以用:之前和之后(一个冒号)来描述,但是这里我们将用CSS3引入的两个冒号来描述它们,以将它们与伪类区分开。

::之前

::之前伪元素是单选按钮的外框,一个白色圆圈。
该位置被指定为绝对位置,其位置为:absolute; 最佳:0; left:0 ;。

.toggle-radio-label::before {
  content: '';
  位置: absolute;
  最佳: 0;
  left: 0;
  /* ... 省略 ... */
  背景颜色: #fff;
  过渡:背景色0.2秒;
}

::之后

::之后伪元素是选中单选按钮时出现的黑色圆圈。
像:::伪元素之前一样,位置由绝对位置值指定,但位置以top:3px; left:3px;的形式移动,以将其显示在圆圈的中间。
当未在transform:scale(0);中选择单选按钮时,这是样式。无法看到圆圈。
过渡:转换0.2s;设置了动画。

.toggle-radio-label::after {
  content: '';
  位置: absolute;
  最佳: 3px;
  left: 3px;
  /* ... 省略 ... */
  转变: scale(0);
  过渡:转换0.2s;
}

选择样式

设置上次选择时的样式。

.toggle-radio:已选中+ .toggle-radio-label:在{之后
  变换:比例(1);
}

名称变得复杂。让我们分开吧。

.toggle-radio:已选中+ .toggle-radio-label:在{之后关于.toggle-radio:选中选择单选按钮时为。和+指的是直接在下面的元素。这意味着:选择单选按钮后,在标签的伪元素之后。
变换:比例(1);设置为在变换元素的比例上显示1x(100%)。

示例:使用复选框切换动画

您也可以对复选框进行切换,尽管需要一些技巧。

看笔 的CSS转换复选框 通过beco(@becolomochi) 上 密码笔.

的HTML

创建风格输入元素是标签它在元素之外。不要忘记输入元素的id属性和标签元素的for属性。

<input type="checkbox" class="toggle-checkbox" id="test"> <label class="toggle-checkbox-label" for="test">トグル</label>

的CSS

首先,隐藏复选框。

.toggle-checkbox {
  display: none;
}

在标签上创建切换样式。

.toggle-checkbox-label {
  光标:指针;
  职位:相对
  padding-left: 52px;
  font-size: 24px;
}

::之前伪元素是切换框的外部框架。
过渡:背景色0.2秒; 我写道,可以在200毫秒内更改背景。

.toggle-checkbox-label::before {
  /* ... 省略 ... */
  背景颜色: #fff;
  过渡:背景色0.2秒;
}

::之后伪元素表示切换ON / OFF。
使用transition:background-color 0.2秒,left 0.2秒;,背景和位置可以在200毫秒内更改。如果要编写多个属性,请用逗号(,)分隔。

.toggle-checkbox-label::after {
  content: '';
  位置: absolute;
  最佳: 3px;
  left: 3px;
  /* ... 省略 ... */
  背景颜色: #ccc;
  过渡: 背景颜色 0.2秒, left 0.2秒;
}

最后,描述打开切换开关时(即选中复选框时)的样式。

.toggle-checkbox:checked + .toggle-checkbox-label::before {
  背景颜色: #bbdefb;  
  border-color: #2196f3;
}
.toggle-checkbox:checked + .toggle-checkbox-label::after {
  背景颜色: #2196f3;
  left: 27px;
} 

尽管需要详细的说明,但我只能使用CSS来创建切换动画。

样本:导航装饰

单击光标时出现下划线的导航。

看笔 的CSS转换标签 通过beco(@becolomochi) 上 密码笔.

的HTML

<nav>
  <ul>
    <li><a href="#" class="item">item</a></li>
    <li><a href="#" class="item">item</a></li>
    <li><a href="#" class="item">item</a></li>
    <li><a href="#" class="item">item</a></li>
    <li><a href="#" class="item">item</a></li>
  </ul>
</nav>

的CSS(SCSS)

在li的伪元素之后用::编写下划线。

    &::after {
      content: '';
      display: block;
      height: 2px;
      背景颜色: #333;
      转变: scale(0);
      过渡:转换0.2s 0.1s;
    }

过渡:转换0.2s 0.1s;因此,在等待0.1秒后,动画需要0.2秒。
击中光标之前,请使用transform:scale(0);隐藏下划线。

:悬停使::在伪元素之后可见。

    &:hover::after {
      变换:比例(1);
    }
  }

a元素是背景颜色带有过渡动画。

  a {
    /* ... 省略 ... */
    背景颜色: #fff;
    过渡:0.2秒;
    &:hover {
      背景颜色: #f2f2f2;
    }
    &:active {
      背景颜色: #eee;
    }
  }

示例:加载动画

这是一个使用动画属性加载动画的示例。

看笔 的CSS动画加载 通过beco(@becolomochi) 上 密码笔.

的HTML

点类div具有动画效果。

<div class="loading">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

的CSS(SCSS)

首先,编写.dot类的基本设计。

.dot {
  display: inline-block;
  margin: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  背景颜色: #fff;
}

动画是SCSS@对于我曾经将.dot类的每个动画的开始时间偏移了0.1秒。

@对于 $i from 1 through 4 {
  $delay: $i * 0.1;
  .dot:nth-child(#{$i}) {
    animation: 1s fade infinite #{$delay}s;
  }
}

当拆卸时,它变成如下。

.dot:nth-child(1) { animation: 1s fade infinite 0.1s; }
.dot:nth-child(2) { animation: 1s fade infinite 0.2秒; }
.dot:nth-child(3) { animation: 1s fade infinite 0.3s; }
.dot:nth-child(4) { animation: 1s fade infinite 0.4s; }

使用称为淡入淡出的关键帧在1秒内进行无穷动画这是一条指令。

淡入淡出关键帧指示动画透明度和大小。

@keyframes fade {
  from { opacity: 0;transform: scale(0); }
  to { opacity: 1;transform: scale(1); }
}

示例:全屏菜单

由于描述量很大,因此使用SCSS编写CSS,并使用jQuery编写Javascript来判断菜单的打开和关闭。

创建一个按钮

首先,我单击了一个按钮,将三行汉堡包菜单变成十字形。

看笔 的CSS转换菜单 通过beco(@becolomochi) 上 密码笔.

的HTML

要动画的图标由span元素组成。

<button class="toggle-btn" id="menu-btn"><span class="toggle-icon"></span></button>

的CSS(SCSS)

我将讲解要点。有关所有详细信息,请参见Codepen。
3线

  1. .toggle-icon类别
  2. ::伪元素之前
  3. ::伪元素之后

用一对一创建线,并使用transform属性的translateY调整位置。

.toggle-icon
我想在它变成十字形时将其擦除,所以过渡是背景颜色被指定。

/* ... 冒頭は省略 */
.toggle-icon {
  光标:指针;
  职位:相对
  width: 32px;
  height: 2px;
  背景颜色: #333;
  content: '';
  display: inline-block;
  过渡:背景色0.2秒;

::之前
我要在变成十字形时旋转,所以过渡是转变要指定。

  &::before {
    content: '';
    位置: absolute;
    最佳: 0;
    left: 0;
    box-sizing: border-box;
    width: 32px;
    height: 2px;
    背景颜色: #333;
    转变: translateY(-8px);
    过渡:转换0.2s;
  }

::之后
我也想用十字标记旋转它,所以过渡转变要指定。

  &::after {
    content: '';
    位置: absolute;
    最佳: 0;
    left: 0;
    box-sizing: border-box;
    width: 32px;
    height: 2px;
    背景颜色: #333;
    转变: translateY(8px);
    过渡:转换0.2s;
  }

最后,在成为十字形时创建样式。

  1. 放置在中间的.toggle-icon线透明且隐藏
  2. 顶部::在伪元素线之前顺时针旋转并倾斜45度
  3. 底部::伪元素线后沿逆时针方向旋转45度

这个开了当类附加到button元素时,写为样式。

.is-open {
  .toggle-icon {
    背景颜色: transparent;
    &::before {
      转变: rotate(45deg);
    }
    &::after {
      转变: rotate(-45deg);
    }
  }
} 

JavaScript(jQuery)

用JavaScript控制。这次我使用了易于编写的jQuery,因为它只是DOM操作。
当按下菜单按钮(#menu-btn)开了确保打开和关闭课程。

$('#menu-btn').on('click', function(){
  $(this).toggleClass('is-open');
})

这是按钮的说明。接下来,执行菜单。

创建菜单部分

接下来,创建在按下按钮时显示的菜单部分。

看笔 的CSS过渡菜单jQuery 通过beco(@becolomochi) 上 密码笔.

的HTML

<button class="toggle-btn" id="menu-btn"><span class="toggle-icon"></span></button>
<div class="menu-box" id="menu">
  <nav class="menu-box-nav">
    <ul>
      <li><a href="#">about</a></li>
      <li><a href="#">infomation</a></li>
      <li><a href="#">gallery</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
</div>

的CSS(SCSS)

我将只解释与操作有关的内容。
首先,我想隐藏菜单框,因此在transform属性的translateY中放置一个负值以将其推离屏幕。
然后设置带有过渡的动画指令。

.menu-box {
  转变: translateY(-100%);
  过渡: 0.3s;
  /* ... 省略 */
}

按下按钮时写入显示内容。

.menu-box.is-open-menu {
  转变: translateY(0);
} 

JavaScript(jQuery)

在菜单中,当在JavaScript(jQuery)中按下按钮时开了菜单确保打开和关闭课程。

$('#menu-btn').on('click', function(){
  $(this).toggleClass('is-open');
  $('#menu').toggleClass('is-open-menu'); // ←追加
})

在JavaSctipt方面,只需切换类分配即可轻松实现菜单的打开和关闭。

其他动画库的介绍

另外,我们将引入一个库,可以用作CSS动画变体的参考。

悬停

悬停动画库,例如链接和按钮。也有带有气球和阴影的样式。 (MIT许可证。但是,商业用途受到限制)
悬停

Animate.css

当您查看或滚动页面时,只需添加一个类来为元素设置动画。 (麻省理工学院执照)
Animate.css

Loaders.css

各种加载动画的库。 (麻省理工学院执照)
Loaders.css

概要

我介绍了可以用CSS表示的示例动画。
如果使用过多的动画,将很难看清,因此,我认为在此方面应该有效地使用它。请利用它通过使用舒适的动画来创建更好的网站。

参考

过渡–CSS:级联样式表| MDN
使用CSS动画–CSS:级联样式表| MDN
普通兄弟姐妹–CSS:级联样式表| MDN

[对于初学者]仔细解释如何编写CSS(样式表)

撰写本文的人

前端开发人员/角色创建者 我本着“热情,温柔和顺畅的沟通”的座右铭,以Bekoro Mochi Kobo的名义从事自由职业。 我喜欢CSS和Adobe Illustrator。