CSS3의 변환 및 애니메이션에 대한 자세한 설명
- 高洛峰원래의
- 2017-03-16 13:23:001381검색
최근 저는 모바일 페이지를 만드는 법을 배우면서 새로운 CSS3 변형과 애니메이션을 포함하여 많은 CSS3새로 추가된 콘텐츠를 사용하는 WeChat 페이지의 작은 데모를 만들었습니다. >. 실제로 이 CSS3 애니메이션 효과는 JS로도 구현할 수 있지만 CSS3에서는 하드웨어 가속을 활성화할 수 있어 성능이 더 좋습니다.
(브라우저 접두어는 아래에 안 써있으니 필요하시면 직접 추가해주세요~~) CSS3에서 일반적인 애니메이션 효과 구현은 실제로 주로 전환과 애니메이션에 의존합니다. 일반적으로 이 두 가지는 CSS3 m과 함께 사용됩니다. 그러면 이 세 가지는 실제로 무엇에 사용됩니까? 나는 내 자신의 이해를 바탕으로 간단한 결론을 내립니다. 변환: 요소를 변형합니다. 전환: 요소의 속성이 변경될 때 전환 애니메이션 효과를 제공합니다. 애니메이션: 복잡한 애니메이션을 수행합니다. 아래에서 자세히 이야기해보겠습니다. 먼저 이야기할 것은 변환 구문입니다.transform:none | transform-functions ;none이 기본값이고 다음 변환 함수는 변환
함수 를 나타냅니다. 🎜>변형 함수에는 2D와 3D 두 가지 유형이 있습니다. // 관련 구문은 http://www.w3school.com.cn/cssref/pr_transform에서 확인할 수 있습니다.
aspquery2D에는 다음이 포함됩니다. (변형은 요소의 중심, 즉 X축과 Y축의 50%를 기준으로 함)
translate () //translateX(),translateY() 포함; 기능 : XOY 좌표에 따라 요소 이동(>
rotate()의 오른쪽 // 기능 : 요소 회전; skew() //skewX() 및skewY() 포함함수: 요소를 기울입니다. 그리고 3D에는 더 많은 Z축이 있습니다. 관련 구문은W3C
에서 찾을 수 있습니다. 여기서는 Zhang Xinxu(http://www.zhangxinxu.com/w)가 작성한 기사를 추천합니다.또는
press/2012/09/css3-3d-transform-perspective-animate-transition/), 변형에 대한 설명이 이해하기 쉽습니다. 기사에 언급된 구문은 다음 시뮬레이터와 함께 사용하면 더 나은 결과를 얻을 수 있습니다~ (http://fangyexu.com/tool-CSS3Inspector.html)舞台 容器 元素 元素 ...//개인적으로 이해하기로는 스테이지의 요소를 전체적으로 취급하면 레이블 레이어를 하나만 추가할 수 있습니다. 즉, 스테이지는 컨테이너로 간주됩니다. 🎜> 2. 무대 CSS에서 원근감(시거)을 설정합니다. 이는 무대에서 사람들의 가정된 거리를 의미합니다. 3D 보기 를 활성화하려면 컨테이너의 CSS에서 변환 스타일: 보존-3d를 설정하여 컨테이너의 하위 요소가 3D 공간에서 렌더링되도록 합니다. //스테이지가 컨테이너로 사용되는 경우 Perspective와 Transform-style이 함께 작성됩니다.
그러면 변형의 기준점이 요소의 중심만 될 수 있나요? 아니요. 변환 원본 속성은 변환의 기준점을 변경할 수 있습니다.
Transform-Origin의 키워드는 일반적으로 top /
bottom/ left /
right
/ center / top left / top right 등입니다. 예 , 모두가 익숙합니다. 개별 키워드 중 일부는 실제로 top = top center = center top과 같은 약어입니다. 그런 다음 전환 애니메이션 전환이 있습니다. 트리거 조건은 :hover /
:focus/
:active
/ :checked /语法： transition: 指定过渡的CSS属性 、 过渡所需时间 、 过渡的函数（动画的速度控制） 、 开始的延迟时间
指定过渡的CSS属性：all / 指定样式 / none （若省略不写，则为 all ，none一般用于清空动画）
过渡所需时间：单位s / ms （默认为0）
过渡的函数： ease（由快到慢 默认值） / linear（匀速） / ease-in（加速） / ease-out（减速） / ease-in-out（先加速后减速）/ cubic-bezier（三次贝塞尔曲线）
延迟时间：单位s / ms （默认为0）
（写transition的时候，先写 动画时间 ， 再写延迟时间）
举个例子吧，博雅今年秋招的笔试题：
用 CSS3 实现一个半径25px的圆 进行速度由快到慢的300px滚动。
p{ width:50px; height:50px; border-radius:25px; background:#000; transition:1s ease-out;}
p:active{ transform:translateX(300px) rotate(780deg);}
贼简单吧~ 这里有几个细节，第一个就是 transition 是放在元素上，而不是 active 上，如果放在active上，就没有回去的动作了，大家可以试一下。
第二个就是，transform多个属性的时候，中间用空格来隔开，如果用逗号的话就没反应了。
但如果我在 :active 上加上 transition，
p{ width:50px; height:50px; border-radius:25px; background:#000; transition:1s ease-out;}
p:active{ transform:translateX(300px) rotate(780deg);transition:2s ease-in;}
这样按住的时候，就会执行 active 里面的transition，也就是去的时候用时 2s ，加速运动；而回来的时候执行 p 里的transition ，用时1s 减速运动。
最后就到 animation 了~ animation也是做动画的，不过功能比 transition 更加强大，因为animation可以控制动画的每一步，而transition只能控制开头和结尾。
语法 animation: 关键帧动画名字 、 动画时间 、 动画播放方式（函数） 、 延迟时间 、 循环次数 、 播放方向 、 播放状态 、 动画时间外的属性 ；
关键帧动画名字：就是你要执行的动画的名字，这里要先知道关键帧的语法
@keyframes name{
0%{
...
}
50%{
...
}
100%{
...
}
}
这里的关键帧的名字就是name ，然后百分比的就是动画的进度，可以根据需要设置不同的百分比，再设置不同的动画。
动画时间：和transition一样~
动画播放方式（函数）：和transition的过渡的函数一样~
延迟时间：和transition一样~
循环次数：动画播放的次数，默认为1，通常为整数，如果为 infinite，则无限次地播放；
播放方向：默认为normal，就是正常地向前播放，还有一个值是 alternate ，就是先正向播放，再反向播放，不断地交替；
播放状态：running(默认) 、 paused // 像播音乐一样可以通过动作来暂停动画;
动画时间外的属性: none(默认) 、 forwards 、 backwards 、both；
举个例子吧：
@keyframes color{
0%{ background:yellow}
100%{ background:blue}
}
p{ background:black}
none： 动画开始前：黑 ； 动画结束后：黑
forwards： 动画开始前：黑 ； 动画结束后：蓝
backwards： 动画开始之前：黄 ； 动画结束后：黑
both： 动画开始前：黄 ； 动画结束后：蓝
就是这么简单~
最后，说一下这三个属性在JS中的写法：
transform：
obj.style.transform = "translateX(100px) scale(2)"; obj.style.webkitTransform = "translateX(100px) scale(2)";//带浏览器前缀
transition：
obj.style.transition = "1s"; obj.style.webKitTransition = "1s";//带浏览器前缀
animation：
obj.style.animation = "name 1s ";//1、关键帧先在css写好；2、兼容写法在关键帧里面写；
위 내용은 CSS3의 변환 및 애니메이션에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!