animation شرح - كيف يكون لديك عدة انتقالات CSS على عنصر؟




selectors html (7)

إنه سؤال بسيط وجميل ، ولكن لا يمكنني العثور على وثائق جيدة جدًا في خصائص انتقال CSS. هذا هو مقتطف CSS:

    .nav a
{
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover
{
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

كما ترون ، يتم استبدال خصائص التحويل ببعضها البعض. كما هو الحال ، سوف تحرك ظل النص ، ولكن ليس اللون. كيف يمكنني الحصول على كل منهم في وقت واحد تنشيط؟ شكرا على أي إجابات.


Answers

.nav a {
    transition: color .2s, text-shadow .2s;
}

إليك مزيج LESS لنقل اثنين من الخصائص في وقت واحد:

.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) {
 -webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
    -moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
      -o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
          transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
}

إذا كنت تقوم بتحريك جميع الخصائص بنفس الطريقة ، يمكنك تعيين كل منها على حدة مما يسمح لك بعدم تكرار الرمز.

 transition: all 2s;
 transition-property: color, text-shadow;

هناك المزيد عن ذلك هنا: اختصار الانتقال إلى CSS مع خصائص متعددة؟

أود أن أتجنب استخدام الخاصية (كل الخاصية الانتقالية - الكتابة فوق الكل) ، حيث قد ينتهي بك الأمر إلى سلوك غير مرغوب فيه ونتائج أداء غير متوقعة.


تكون خصائص الانتقال محددة بفواصل في جميع المتصفحات التي تدعم عمليات النقل:

.nav a {
  transition: color .2s, text-shadow .2s;
}

ease هي وظيفة التوقيت الافتراضية ، لذا لن تضطر إلى تحديدها. إذا كنت تريد حقاً linear ، فستحتاج إلى تحديده:

transition: color .2s linear, text-shadow .2s linear;

يبدأ هذا في التكرار ، لذلك إذا كنت ستستخدم نفس الأوقات ووظائف التوقيت عبر العديد من الخصائص ، فمن الأفضل المضي قدمًا واستخدام الخصائص transition-* المختلفة بدلاً من الاختزال:

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

يمكنك ببساطة ببساطة مع:

.nav a {
    -webkit-transition: all .2s;
}

سيسمح شيء مثل ما يلي بتحويلات متعددة في وقت واحد:

-webkit-transition: color .2s linear, text-shadow .2s linear;
   -moz-transition: color .2s linear, text-shadow .2s linear;
     -o-transition: color .2s linear, text-shadow .2s linear;
        transition: color .2s linear, text-shadow .2s linear;

مثال: http://jsbin.com/omogaf/2


هذا سؤال قديم ، لكنني أعتقد أنه يستحق ذلك لمشاركة كيفية إنشاء سهم باستخدام تقنية المثلث هذه.

الخطوة 1:

يتيح إنشاء مثلثات 2 ، للثانية واحدة سوف نستخدم :after الدرجة الزائفة ووضعه تحت الآخر فقط:

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #ccc;
         right: -50px;
    }
<div class="arrow arrow-up"> </div>

الخطوة 2

الآن علينا فقط تعيين لون الحدود السائد للمثلث الثاني على نفس لون الخلفية:

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #fff;
         right: -50px;
    }
<div class="arrow arrow-up"> </div>

عزف مع كل الأسهم:
http://jsfiddle.net/tomsarduy/r0zksgeu/





css animation css3 css-transitions