css 动画——animation属性(含transition)

文章目录

    • 1. 什么是css动画
    • 2. 关键帧 `@keyframes` 规则
    • 3. animation属性语法
    • 4. 示例
    • 5. animation与transition
      • transition简介

1. 什么是css动画

动画就是使元素从一种样式逐渐变化为另一种样式的效果。

创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中我们能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间,或者通过关键词 fromto,等价于 0% 和 100%。

2. 关键帧 @keyframes 规则

如需使用 CSS 动画,首先必须为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。

设置关键帧:

/*@keyframes后跟的是关键帧的名字(可以随便起)*/
  @keyframes name {
            /*from表示动画的开始位置 也可以使用0%*/
            from{
                margin-left: 0;
            }

            /*to动画的结束位置 也可以使用100%*/
            to{
                margin-left: 700px;
            }
        }

要使动画生效,必须将动画绑定到某个元素。


3. animation属性语法

animation: name duration timing-function delay iteration-count direction;

css 动画——animation属性(含transition)_第1张图片

4. 示例

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation属性title>
    <style>
        body{
            background-color: #000;
        }

        .blink div {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background-color: #fff;
            animation: blink 1.5s ease infinite alternate;
        }

        @keyframes blink {
            0% {
                box-shadow: 0 0 0 0 #fff;
            }

            25% {
                box-shadow: 0 0 1px 1px #fff;
            }

            50% {
                box-shadow: 0 0 2px 2px #fff;
            }

            75% {
                box-shadow: 0 0 3px 3px #fff;
            }

            100% {
                box-shadow: 0 0 4px 4px #fff;
            }
        }
    style>
head>

<body>
    <div class="blink">
        <div>div>
    div>
body>

html>

效果:
在这里插入图片描述

5. animation与transition

animation与transition都可以做出动画效果,但是transition主要做简单的过渡效果,而animation可以做复杂的动画效果,在语法和用法上有非常大的区别。

transition过渡属性,强调过渡,他的实现需要触发一个事件(比如鼠标移动上去,焦点,点击等)才执行动画,过渡只有一组(两个:开始-结束)关键帧。

animation动画属性,他的实现不需要触发事件,设定好时间之后可以自己执行,且可以循环一个动画(设置多个关键帧)。

transition简介

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
css 动画——animation属性(含transition)_第2张图片

如需创建过渡效果,必须明确两件事:

  • 您要添加效果的 CSS 属性
  • 效果的持续时间

示例:
css 动画——animation属性(含transition)_第3张图片

你可能感兴趣的:(前端零零散散,css,动画,css3)