html生日动画代码_CSS 动画

实现CSS动画有两种方法：过渡动画(transition)和animation动画。

实现制作一颗会动的红心

过渡动画

设置transition设置过渡，添加transform设置形状。

html代码

<div class="demo">
  <div class="left common"></div>
  <div class="right common"></div>
  <div class="bottom common"></div>
</div>

CSS样式

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.common{
  width:50px;
  height:50px;
  background:red;
}
.demo{
  position:relative;
  margin:100px;
  display:inline-block;
  transition:all 1s;
  transform:scale(1.5) /*transition设置过渡*/
}
.demo:hover{
  transform:scale(1.5) /*加transform设置形状*/
}
​
.demo>.left{
  position:absolute;
  top:-100%;
  left:100%;
  border-radius:  50% 50% 0 0 ;
  transform:rotate(45deg) translateY(41px)
  
}
.demo>.right{
  position:absolute;
  top:-100%;
  right:100%;
  border-radius:50% 0 0 50%;
  transform:rotate(45deg) translateX(41px)
}
.demo>.bottom{
  transform:rotate(45deg);
}
​

注意：不是所有属性都有过渡 display：none=>block没法过渡 一般写成visibility：hidden =>visible

transform四个常用功能

• 位移：translate
• 缩放：scale
• 旋转：rotate
• 倾斜：skew

注意：

1. transform一般配合transition 过渡 使用
2. inline元素不支持transform，需要先变成block
3. translate(-50%,-50%)可做绝对定位元素的居中

animation动画

添加animation属性，设置动画效果

html代码

<div class="demo">
  <div class="left common"></div>
  <div class="right common"></div>
  <div class="bottom common"></div>
</div>

CSS样式

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.common{
  width:50px;
  height:50px;
  background:red;
}
.demo{
  position:relative;
  margin:100px;
  display:inline-block;
  animation:hear 1s infinite;
}
@keyframes hear{
  0%{
    transform:scale(1.0)
  }
  100%{
    transform:scale(1.5)
  }
}
​
.demo>.left{
  position:absolute;
  top:-100%;
  left:100%;
  border-radius:  50% 50% 0 0 ;
  transform:rotate(45deg) translateY(41px)
  
}
.demo>.right{
  position:absolute;
  top:-100%;
  right:100%;
  border-radius:50% 0 0 50%;
  transform:rotate(45deg) translateX(41px)
}
.demo>.bottom{
  transform:rotate(45deg);
}

定义和用法：

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name 　// keyframe 名称。。
• animation-duration //动画时长，以秒或毫秒计。
• animation-timing-function //　规定动画的速度曲线（指定过渡函数）。
• animation-delay　　规定在动画开始之前的延迟。
• animation-iteration-count 规定动画应该播放的次数。
• animation-direction 　规定是否应该轮流反向播放动画。

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

animation-play-state: running 用于设置动画是否暂停。

animation @keyframes规则

keyframes被称为关键帧

写法 @keyframes 动画名称{} 括号中就是一些不同时间段样式规则

在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：

• none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
• forwards 表示动画在结束后继续应用最后的关键帧的位置
• backwards 会在向元素应用动画样式时迅速应用动画的初始帧
• both 元素动画同时具有forwards和backwards效果