CSS 4.2.4参考手册
目录搜索
提交中...

©
本文档使用 php.cn手册 发布

文字
分享

语法：

animation-name：<single-animation-name>[,<single-animation-name>]*

<single-animation-name> = none | <identifier>

默认值：none

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：视觉

相关属性：[ @keyframes ]

取值：

  • none：不引用任何动画名称

  • <identifier>：定义一个或多个动画名称(identifier标识)

说明：

检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

  • 如果提供多个属性值，以逗号进行分隔。

  • 对应的脚本特性为animationName。

兼容性：

ValuesIEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
Basic Support6.0-9.02.0-4.04.0-42.0-webkit-6.0-8.0-webkit-15.0-29.0-webkit-6.0-8.4-webkit-2.1-3.0-webkit- #118.0-42.0-webkit-
10.0+5.0-15.0-moz-43.0+9.0+30.0+9.0+4.0-40.0-webkit-
16.0+

  1. 在一些场景中会有错误行为

  2. 部分浏览器不支持伪元素动画，或者支持得不够好，尽可能不要利用伪元素来做动画

示例：

实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

<meta charset="utf-8" />

<title>animation-name_CSS参考手册_web前端开发参考手册系列</title>

<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />

<style>

div{position:absolute;top:50%;left:50%;width:300px;height:150px;margin:-75px 0 0 -150px;}

.over{border:3px solid #eee;background:#e0e0e0;}

.text{font:bold 14px/150px Georgia;text-align:center;}

.over{

    -webkit-animation:animations 2.5s ease-out forwards,animations3 1s ease-out 2.5s forwards;

    -moz-animation:animations 2.5s ease-out forwards,animations3 1s ease-out 2.5s forwards;

    animation:animations 2.5s ease-out forwards,animations3 1s ease-out 2.5s forwards;

}

@-webkit-keyframes animations{

    0%{-webkit-transform:scale(0);opacity:0;}

    40%{-webkit-transform:scale(1);opacity:1;}

    100%{opacity:1;}

}

@-moz-keyframes animations{

    0%{-moz-transform:scale(0);opacity:0;}

    40%{-moz-transform:scale(1);opacity:1;}

    100%{opacity:1;}

}

@keyframes animations{

    0%{transform:scale(0);opacity:0;}

    40%{transform:scale(1);opacity:1;}

    100%{opacity:1;}

}

.text{

    opacity: 0;

    -webkit-animation:animations2 1.5s ease-out 1s forwards;

    -moz-animation:animations2 1.5s ease-out 1s forwards;

    animation:animations2 1.5s ease-out 1s forwards;

}

@-webkit-keyframes animations2{

    0%{-webkit-transform:scale(4);opacity:0;}

    40%{-webkit-transform:scale(2);opacity:1;}

    70%{-webkit-transform:scale(2);opacity:1;}

    100%{-webkit-transform:scale(5);opacity:0;}

}

@-moz-keyframes animations2{

    0%{-moz-transform:scale(4);opacity:0;}

    40%{-moz-transform:scale(2);opacity:1;}

    70%{-moz-transform:scale(2);opacity:1;}

    100%{-moz-transform:scale(5);opacity:0;}

}

@keyframes animations2{

    0%{transform:scale(4);opacity:0;}

    40%{transform:scale(2);opacity:1;}

    70%{transform:scale(2);opacity:1;}

    100%{transform:scale(5);opacity:0;}

}

@-webkit-keyframes animations3{

    0%{-webkit-transform:scale(1);opacity:1;}

    100%{-webkit-transform:scale(0);opacity:0;}

}

@-moz-keyframes animations3{

    0%{-moz-transform:scale(1);opacity:1;}

    100%{-moz-transform:scale(0);opacity:0;}

}

@keyframes animations3{

    0%{transform:scale(1);opacity:1;}

    100%{transform:scale(0);opacity:0;}

}

</style>

</head>

<body>

<div class="over"></div>

<div class="text">CSS3 Animations</div>

</body>

</html>

            


运行实例 »

点击 "运行实例" 按钮查看在线实例

上一篇：animation下一篇：animation-duration