ภาพเคลื่อนไหวปั่น CSS3


158

ฉันได้ดูการสาธิตไม่กี่ครั้งและไม่รู้ว่าทำไมฉันไม่สามารถหมุน CSS3 เพื่อใช้งานได้ ฉันใช้ Chrome รุ่นเสถียรล่าสุด

ซอ: http://jsfiddle.net/9Ryvs/1/

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 40000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 40000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 40000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-transition: rotate(3600deg);
}
<div></div>

คำตอบ:


299

ในการใช้ภาพเคลื่อนไหว CSS3 คุณจะต้องกำหนดคีย์ภาพเคลื่อนไหวจริง ( ซึ่งคุณตั้งชื่อspin )

อ่านhttps://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animationsสำหรับข้อมูลเพิ่มเติม

เมื่อคุณกำหนดเวลาของภาพเคลื่อนไหวแล้วคุณจะต้องกำหนดลักษณะที่ปรากฏของภาพเคลื่อนไหว สิ่งนี้ทำได้โดยการสร้างคีย์เฟรมสองตัวขึ้นไปโดยใช้@keyframesat-rule แต่ละเฟรมหลักอธิบายว่าองค์ประกอบภาพเคลื่อนไหวควรแสดงอย่างไรในช่วงเวลาที่กำหนดระหว่างลำดับภาพเคลื่อนไหว


การสาธิตที่http://jsfiddle.net/gaby/9Ryvs/7/

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

9
คุณได้รับ✓เพราะคุณอธิบายได้ดีที่สุดและคุณเป็นคำตอบเดียวที่รวมถึงเวอร์ชั่นที่ขึ้นต้นด้วยทั้งหมด
iambriansreed

53
นี่เป็นไนติงกี้สุด ๆ แต่คุณควรจะมีชีวิตอยู่ถึง 359 องศา 360 และ 0 องศาเป็นรัศมีเดียวกันดังนั้นภาพเคลื่อนไหวจะหยุดชั่วขณะหนึ่งเมื่อถึงจุดเปลี่ยน
Adam Grant

1
@AdamGrant ขอบคุณนี้ได้ก่อให้เกิดเกือบฉันปวดหัวในวันนี้ฮ่า ๆ
mattslone

5
คุณต้องการทำให้มีชีวิตชีวาถึง 359.9999999999 องศาไม่ใช่ 359 องศาการหมุนเป็นช่วงต่อเนื่องที่ [0, 360) และถ้าคุณหมุนถึง 359.0 คุณจะมีเครื่องหมาย 1 องศาที่จุดเริ่มต้นของการหมุนทุกครั้งเมื่อมันเริ่มจาก 359 ถึง 0 .
mdonoughe

16
เพื่อชี้แจงความคิดเห็นทั้งหมดที่ให้ข้อมูลไม่ถูกต้อง ... คำตอบที่เลือกนั้นถูกต้องโดยไม่มีการดัดแปลง 0 และ 360 องศานั้นแตกต่างกันในสายตาของเบราว์เซอร์ในขณะที่ยังคงเป็นจุดเดิม ตัวอย่างเช่นถ้าคุณพยายามหมุนจาก 0deg เป็น 0deg (หรือ 360deg ถึง 360deg) มันจะไม่หมุนเลย การหมุนจาก 0deg เป็น 360deg บอกให้เบราว์เซอร์หมุนวัตถุให้เต็ม 360 องศาก่อนที่จะทำแอนิเมชั่นให้เสร็จ ตั้งค่าanimation-iteration-count: infinite;และคุณจะมีเฟรมไม่มีที่สิ้นสุดในภาพเคลื่อนไหว แม้การหมุน 20 นาทีจะดูไร้ที่ติและราบรื่น
jacurtis

28

คุณยังไม่ได้ระบุคีย์เฟรมใด ๆ ฉันทำมันทำงานที่นี่

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation: spin 4s infinite linear;
}

@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

คุณสามารถทำสิ่งดีๆมากมายกับสิ่งนี้ได้ นี่คือหนึ่งที่ผมทำไว้ก่อนหน้า

:)

NBคุณสามารถข้ามต้องเขียนออกคำนำหน้าทั้งหมดถ้าคุณใช้-prefix ฟรี


17

ตั้งแต่ Chrome / FF ล่าสุดและ IE11 ไม่จำเป็นต้องใช้คำนำหน้า -ms / -moz / -webkit นี่คือรหัสที่สั้นกว่า (ตามคำตอบก่อนหน้า):

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;

    /* The animation part: */
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

การสาธิตสด: http://jsfiddle.net/9Ryvs/3057/


5
animation: spin 4s linear infiniteรวมกฎนิเมชั่นที่มีการจดชวเลข
Josh Habdas

10

HTML พร้อม glyphicon ที่ยอดเยี่ยมแบบอักษร

<span class="fa fa-spinner spin"></span>

CSS

@-moz-keyframes spin {
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    to {transform:rotate(360deg);}
}

.spin {
    animation: spin 1000ms linear infinite;
}

1
คุณจะได้รับ upvote ของฉันสำหรับการเพิ่มคำจำกัดความของ. spin
Blair Connolly

6

คำตอบเดียวที่ให้คำตอบที่ถูกต้อง 359deg:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

&.active {
  animation: spin 1s linear infinite;
}

นี่คือการไล่ระดับสีที่มีประโยชน์เพื่อให้คุณสามารถพิสูจน์ได้ว่ากำลังหมุน (ถ้าเป็นวงกลม):

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

4

ในการหมุนคุณสามารถใช้เฟรมหลักและการแปลง

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 40000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 40000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 40000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform:rotate(0deg);
  }

  to {
    -webkit-transform:rotate(360deg);
  }
}

ตัวอย่าง


4

เพื่อความสำเร็จนี่คือตัวอย่าง Sass / Compass ที่ย่อรหัสให้สั้นลง CSS ที่คอมไพล์แล้วจะรวมคำนำหน้าที่จำเป็นเป็นต้น

div
  margin: 20px
  width: 100px 
  height: 100px    
  background: #f00
  +animation(spin 40000ms infinite linear)

+keyframes(spin)
  from
    +transform(rotate(0deg))
  to
    +transform(rotate(360deg))

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.